nicolas
/
Telegram-Photo-Album-Bot
mirror of https://github.com/nmasse-itix/Telegram-Photo-Album-Bot.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

improve look and feel

master
Nicolas Massé 6 years ago
parent
aad72602f5
commit
4e22a7601e
4 changed files with 24 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      web/album.html.template
  2. 32
      web/css/main.css
  3. 2
      web/index.html.template
  4. 5
      web/media.html.template

6
web/album.html.template
View File

@ -3,7 +3,7 @@
<head> <head>
<title>{{ .Title }}</title> <title>{{ .Title }}</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=contain">
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
<script type="text/javascript" src="/js/main.js"></script> <script type="text/javascript" src="/js/main.js"></script>
</head> </head>
@ -17,8 +17,8 @@
</li> </li>
{{ else if eq .Type "video" }} {{ else if eq .Type "video" }}
<li> <li>
<a href="media/{{ .ID }}/"> <a href="media/{{ .ID }}/">
<video loop muted poster="raw/{{ .Files|photo }}"> <video loop muted poster="raw/{{ .Files|photo }}" preload="none">
<source src="raw/{{ .Files|video }}" type="video/mp4"> <source src="raw/{{ .Files|video }}" type="video/mp4">
</video> </video>
</a> </a>

32
web/css/main.css
View File

@ -6,6 +6,11 @@ h1 {
font-family: sans-serif; font-family: sans-serif;
} }
html {
height: 100%;
width: 100%;
}
/* Album */ /* Album */
body.album { body.album {
@ -38,30 +43,29 @@ body.album {
flex-grow: 10; flex-grow: 10;
} }
/* Album */ /* Media */
.media div { body.media {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0;
display: flex; display: flex;
justify-content: center flex-direction: column-reverse;
} justify-content: space-between;
html, body.media {
height: 100%;
margin: 0
} }
body.media h1 { body.media h1 {
position: fixed;
bottom: 0px;
left: 10%;
right: 10%;
background-color: #888888AA; background-color: #888888AA;
padding: 1vh; padding: 1vh;
margin-left: 3vh;
margin-right: 3vh;
} }
.media div img, .media div video { .media img, .media video {
object-fit: contain; object-fit: contain;
max-height: 80%;
max-width: 100%;
margin-top: 3vh;
margin-left: 3vh;
margin-right: 3vh;
} }

2
web/index.html.template
View File

@ -3,7 +3,7 @@
<head> <head>
<title>{{ .Title }}</title> <title>{{ .Title }}</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=contain">
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
</head> </head>
<body class="index"> <body class="index">

5
web/media.html.template
View File

@ -3,14 +3,13 @@
<head> <head>
<title>{{ .Caption }}</title> <title>{{ .Caption }}</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=contain">
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
</head> </head>
<body class="media"> <body class="media">
{{ if ne .Caption "" }} {{ if ne .Caption "" }}
<h1>{{ .Caption }}</h1> <h1>{{ .Caption }}</h1>
{{ end }} {{ end }}
<div>
{{ if eq .Type "photo" }} {{ if eq .Type "photo" }}
<img src="../../raw/{{ .Files|photo }}" /> <img src="../../raw/{{ .Files|photo }}" />
{{ else if eq .Type "video" }} {{ else if eq .Type "video" }}
@ -18,6 +17,6 @@
<source src="../../raw/{{ .Files|video }}" type="video/mp4"> <source src="../../raw/{{ .Files|video }}" type="video/mp4">
</video> </video>
{{ end }} {{ end }}
</div> <div><!-- Empty Flex element so that "justify-content: space-between" work as expected --></div>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save