Skip to content

Commit

Permalink
changes to the ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Veeransh14
Veeransh14 committed Feb 26, 2024
1 parent 26f5c71 commit 04b28d7
Show file tree
Hide file tree
Showing 4 changed files with 241 additions and 529 deletions.
85 changes: 43 additions & 42 deletions src/youtube2zim/templates/article.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,45 @@
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>{{ title }}</title>
<meta content="utf-8" http-equiv="encoding">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/videojs/video-js.min.css" rel="stylesheet">
<link href="assets/article.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {background: {{ background_color }};}
</style>
<link id="favicon" rel="shortcut icon" href="profile.jpg" type="image/jpeg">
<script src="assets/videojs/video.min.js"></script>
<script src="assets/ogvjs/ogv-support.js"></script>
<script src="assets/ogvjs/ogv.js"></script>
<script src="assets/videojs-ogvjs.js"></script>
<script src="assets/polyfills.js"></script>
<script src="assets/webp-hero.bundle.js"></script>
</head>
<body>
<div id="content">
<a href="home.html"><img id="backtolist" src="channels/{{ author.channelId }}/profile.jpg" title="Back to the list" /></a>
<p id="speaker">{{ author.channelTitle }}</p>
<p id="title">{{ title }}</p>
<video class="video-js vjs-default-skin"
id="video_container"
poster="videos/{{ video_id }}/video.webp"
width="480px" height="270px"
controls="true"
{% if autoplay %}autoplay="true"{% endif %}
preload="true"
data-setup='{"techOrder": ["html5", "ogvjs"], "ogvjs": {"base": "assets/ogvjs"}, "autoplay": {% if autoplay %}true{% else %}false{% endif %}, "preload": true, "controls": true, "controlBar": {"pictureInPictureToggle":false}}'>
<source src="videos/{{ video_id }}/video.{{ video_format }}" type="video/{{ video_format }}" />{% if subtitles %}
{% for language in subtitles %}<track kind="subtitles" src="videos/{{ video_id }}/video.{{ language.code }}.vtt" srclang="{{ language.code }}" label="{{ language.name }}" />
{% endfor %}{% endif %}
</video>
<div id="description">
<p>{{ description }}</p>
</div>
<div id="date">{{ date }}</div>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/videojs/video-js.min.css" rel="stylesheet">
<link href="assets/article.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background: {{ background_color }};
}
</style>
<link id="favicon" rel="shortcut icon" href="profile.jpg" type="image/jpeg">
<script src="assets/videojs/video.min.js"></script>
<script src="assets/ogvjs/ogv-support.js"></script>
<script src="assets/ogvjs/ogv.js"></script>
<script src="assets/videojs-ogvjs.js"></script>
<script src="assets/polyfills.js"></script>
<script src="assets/webp-hero.bundle.js"></script>
</head>

<body>
<div id="content">
<a href="home.html">
<img id="backtolist" src="channels/{{ author.channelId }}/profile.jpg" title="Back to the list" />
</a>
<p id="speaker">{{ author.channelTitle }}</p>
<p id="title">{{ title }}</p>
<video class="video-js vjs-default-skin" id="video_container" poster="videos/{{ video_id }}/video.webp" width="480px" height="270px" controls="true" {% if autoplay %}autoplay="true"{% endif %} preload="true" data-setup='{"techOrder": ["html5", "ogvjs"], "ogvjs": {"base": "assets/ogvjs"}, "autoplay": {% if autoplay %}true{% else %}false{% endif %}, "preload": true, "controls": true, "controlBar": {"pictureInPictureToggle":false}}'>
<source src="videos/{{ video_id }}/video.{{ video_format }}" type="video/{{ video_format }}" />{% if subtitles %}
{% for language in subtitles %}<track kind="subtitles" src="videos/{{ video_id }}/video.{{ language.code }}.vtt" srclang="{{ language.code }}" label="{{ language.name }}" />
{% endfor %}{% endif %}
</video>
<div id="description">
<p>{{ description }}</p>
</div>
<script src="assets/jquery.min.js" type="text/javascript"></script>
<script src="assets/webp-trigger.js"></script>
</body>
<div id="date">{{ date }}</div>
</div>
<script src="assets/jquery.min.js" type="text/javascript"></script>
<script src="assets/webp-trigger.js"></script>
</body>

</html>
19 changes: 8 additions & 11 deletions src/youtube2zim/templates/assets/article.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,34 +25,34 @@

body {
background: #fafafa;
font-family: Helvetica, Arial, sans-serif;
font-family: "RobotoRegular", Helvetica, Arial, sans-serif;
font-weight: 400;
margin-top: 30px;
max-width: 100%;
}

hr {
margin-top: 25px;
margin-left: 0;
text-align: left;
width: 480px;
width: 100%;
}

#content {
margin: 0 auto;
width: 480px;
width: 100%;
max-width: 480px;
text-align: justify;
text-justify: inter-word;
max-width:100%;
}

#description {
font-family: 'RobotoLight';
color: #333;
width: 480px;
width: 100%;
font-size: 18px;
text-align: justify;
text-justify: inter-word;
max-width:100%;
}

#description p {
Expand All @@ -63,7 +63,6 @@ hr {
font-family: "RobotoLight";
font-size: 20px;
margin: 0;
max-width:100%;
}

#title {
Expand All @@ -72,7 +71,6 @@ hr {
font-size: 30px;
text-align: left;
text-justify: none;
max-width:100%;
}

#views {
Expand Down Expand Up @@ -106,15 +104,14 @@ hr {
}

#speaker_desc {
width: 480px;
width: 100%;
margin: 0;
font-family: "RobotoLight";
}

#date {
text-align: right;
width: 480px;
max-width:100%;
width: 100%;
}

#backtolist {
Expand Down
Loading

0 comments on commit 04b28d7

Please sign in to comment.