Skip to content

Commit

Permalink
Graphics changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@M4RC02U1F4A4
M4RC02U1F4A4 committed May 30, 2023
1 parent 3f2e42a commit 31f0d7f
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 67 deletions.
6 changes: 5 additions & 1 deletion app/static/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,8 @@
}
.channel-title {
font-size: 23px
}
}
.video-card {
max-width: 380px !important;
}
.navbar-collapse ul {height: 100vh;}
10 changes: 5 additions & 5 deletions app/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@

<div class="container-fluid">
<div class="row">
<div class="col-lg-2 position-relative">
<div class="col-xl-2">
<div class="sticky-top">
{% include "sidebar.html" %}
</div>
</div>
<div class="col-lg-10 position-relative">
<div class="row">
<div class="col-xl-10">
<div class="row justify-content-center justify-content-xl-start">
{% for video in videos %}
<div class="col-lg-3 col-md-4 col-sm-6 mt-5" id="div{{ video['_id'] }}">
<div class="col mt-5 video-card align-items-start" id="div{{ video['_id'] }}">
<div class="row">
<div class="position-relative text-center">
<img src="{{ video['thumbnail']}}" width="360" height="203" class="img-fluid thumbnail-rad">
<img src="{{ video['thumbnail']}}" width="360" height="203" class="thumbnail-rad">
<a class="stretched-link" href="https://www.youtube.com/watch?v={{ video['_id'] }}" id="{{ video['_id'] }}" onclick="read(this.id);" target="_blank"></a>
</div>
</div>
Expand Down
172 changes: 115 additions & 57 deletions app/templates/sidebar.html
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,115 @@
<main class="d-flex flex-nowrap justify-content-center">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img class="me-4" src="{{ url_for('static', filename='media/favicon.png') }}" width="40px">
<span class="fs-4">YouTube RSS</span>
</a>
<hr>
<span class="text-center">{{ last_update }}</span>
<hr>
<span class="text-center">{{ time | convert_time | beautify_time }}</span>
<hr>
<ul class="nav nav-pills flex-column mb-auto ">
<li class="nav-item">
{% if active == 'home' %}
<a href="/" class="nav-link active" aria-current="page">
{% else %}
<a href="/" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
Home (<span id="videos_len">{{ videos_len }}</span>)
</a>
</li>
<hr>
<li class="d-none d-sm-block">
{% if active == 'channels' %}
<a href="/channels" class="nav-link active" aria-current="page">
{% else %}
<a href="/channels" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
Channels ({{ channels_len }})
</a>
</li>
<li>
{% if active == 'videos' %}
<a href="/videos" class="nav-link active" aria-current="page">
{% else %}
<a href="/videos" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
Videos ({{ all_videos_len }})
</a>
</li>
<hr>
<li class="d-none d-sm-block">
{% if active == 'manage' %}
<a href="/manage" class="nav-link active" aria-current="page">
{% else %}
<a href="/manage" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
Manage
</a>
</li>
</ul>
</div>
</main>
<nav class="navbar navbar-dark bg-dark">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img class="me-4" src="{{ url_for('static', filename='media/favicon.png') }}" width="40px">
<span class="fs-4">YouTube RSS</span>
</a>
<button class="navbar-toggler d-xl-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMenu">
<span class="navbar-toggler-icon"></span>
</button>
</nav>

<ul class="navbar-nav justify-content-end flex-grow-1 pe-3 collapse nav-pills text-white" id="collapseMenu">
<hr>
<li class="nav-item">
<span class="text-center nav-link">{{ last_update }}</span>
</li>
<li class="nav-item">
<span class="text-center nav-link fw-bold">{{ time | convert_time | beautify_time }}</span>
</li>
<hr>
<li class="nav-item">
{% if active == 'home' %}
<a href="/" class="nav-link active" aria-current="page">
{% else %}
<a href="/" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
Home (<span id="videos_len">{{ videos_len }}</span>)
</a>
</li>
<hr>
<li class="nav-item">
{% if active == 'channels' %}
<a href="/channels" class="nav-link active" aria-current="page">
{% else %}
<a href="/channels" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
Channels ({{ channels_len }})
</a>
</li>
<li class="nav-item">
{% if active == 'videos' %}
<a href="/videos" class="nav-link active" aria-current="page">
{% else %}
<a href="/videos" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
Videos ({{ all_videos_len }})
</a>
</li>
<hr>
<li class="nav-item">
{% if active == 'manage' %}
<a href="/manage" class="nav-link active" aria-current="page">
{% else %}
<a href="/manage" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
Manage
</a>
</li>
</ul>

<ul class="navbar-nav justify-content-end flex-grow-1 pe-3 nav-pills text-white d-none d-xl-block" id="collapseMenu">
<hr>
<li class="nav-item">
<span class="text-center nav-link">{{ last_update }}</span>
</li>
<li class="nav-item">
<span class="text-center nav-link fw-bold">{{ time | convert_time | beautify_time }}</span>
</li>
<hr>
<li class="nav-item">
{% if active == 'home' %}
<a href="/" class="nav-link active" aria-current="page">
{% else %}
<a href="/" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
Home (<span id="videos_len">{{ videos_len }}</span>)
</a>
</li>
<hr>
<li class="nav-item">
{% if active == 'channels' %}
<a href="/channels" class="nav-link active" aria-current="page">
{% else %}
<a href="/channels" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
Channels ({{ channels_len }})
</a>
</li>
<li class="nav-item">
{% if active == 'videos' %}
<a href="/videos" class="nav-link active" aria-current="page">
{% else %}
<a href="/videos" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
Videos ({{ all_videos_len }})
</a>
</li>
<hr>
<li class="nav-item">
{% if active == 'manage' %}
<a href="/manage" class="nav-link active" aria-current="page">
{% else %}
<a href="/manage" class="nav-link text-white" aria-current="page">
{% endif %}
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
Manage
</a>
</li>
</ul>
8 changes: 4 additions & 4 deletions app/templates/videos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@

<div class="container-fluid">
<div class="row">
<div class="col-lg-2 position-relative">
<div class="col-xl-2">
<div class="sticky-top">
{% include "sidebar.html" %}
</div>
</div>
<div class="col-lg-10 position-relative">
<div class="row">
<div class="col-xl-10">
<div class="row justify-content-center justify-content-xl-start">
{% for video in videos %}
<div class="col-lg-3 mt-5" id="div{{ video['_id'] }}">
<div class="col mt-5 video-card align-items-start" id="div{{ video['_id'] }}">
<div class="row">
<div class="position-relative">
<img src="{{ video['thumbnail']}}" width="360" height="203" class="thumbnail-rad">
Expand Down

0 comments on commit 31f0d7f

Please sign in to comment.