hjp
/
picture-tournament
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: hjp:b7373d2b9829a9ab707ce0ca7f4dad976a92b366
Branches Tags
hjp:master
..
compare: hjp:23ca037ab48a85664cf220e6136ac59f46c76d56
Branches Tags
hjp:master

2 Commits
b7373d2b98 ... 23ca037ab4

Author SHA1 Message Date
Peter J. Holzer 23ca037ab4 Replace scaled triangles with pairs of triangles 
Scaling text in CSS is just too fiddly. So let's cheat :-).
 2021-08-29 12:22:12 +02:00
Peter J. Holzer 317bebc7a8 Add a bit more space and restrict image size by viewport height 2021-08-29 11:41:52 +02:00
2 changed files with 20 additions and 22 deletions
Show Stats Expand all files Collapse all files

7
pt/static/style.css
View File

@ -17,6 +17,7 @@ h1 {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
gap: 2em;
} }
#hdr { grid-column: 1 / span 2; grid-row: 1; } #hdr { grid-column: 1 / span 2; grid-row: 1; }
@ -40,7 +41,6 @@ header {
.up { .up {
color: #080; color: #080;
font-size: 2rem; font-size: 2rem;
transform: scale(2,1);
text-align: center; text-align: center;
} }
@ -52,7 +52,6 @@ header {
.down { .down {
font-size: 2rem; font-size: 2rem;
color: #C00; color: #C00;
transform: scale(2,1);
text-align: center; text-align: center;
} }
@ -80,6 +79,6 @@ header {
.pic img { .pic img {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
max-width: 48vw; max-width: min(48vw, calc(100vh - 13rem));
max-height: 48vw; max-height: min(48vw, calc(100vh - 13rem));
} }

35
pt/templates/pt/compare.html
View File

@ -8,27 +8,26 @@
</head> </head>
<body> <body>
<div id="page"> <div id="page">
<header id="hdr"> <header id="hdr">
<div class="nav refresh"><a href="{% url 'refresh' %}">⟳</a></div> <div class="nav refresh"><a href="{% url 'refresh' %}">⟳</a></div>
<h1> Picture Tournament </h1> <h1> Picture Tournament </h1>
<div class="nav top"><a href="{% url 'top' %}">▤</a></div> <div class="nav top"><a href="{% url 'top' %}">▤</a></div>
</header> </header>
<div class="imgviewer left" id="view-left"> <div class="imgviewer left" id="view-left">
<div class="up"><a href="{% url 'left-wins' %}">▲</a></div> <div class="up"><a href="{% url 'left-wins' %}">◢◣</a></div>
<div class="pic"> <div class="pic">
<img src="/media/{{left.url}}"><br>{{left.elo | floatformat:"1"}} <img src="/media/{{left.url}}"><br>{{left.elo | floatformat:"1"}}
</div>
<div class="down"><a href="{% url 'right-wins' %}">◥◤</a></div>
</div> </div>
<div class="down"><a href="{% url 'right-wins' %}">▼</a></div>
</div>
<div class="imgviewer right" id="view-right"> <div class="imgviewer right" id="view-right">
<div class="up"><a href="{% url 'right-wins' %}">▲</a></div> <div class="up"><a href="{% url 'right-wins' %}">◢◣</a></div>
<div class="pic"> <div class="pic">
<img src="/media/{{right.url}}"><br>{{right.elo | floatformat:"1"}} <img src="/media/{{right.url}}"><br>{{right.elo | floatformat:"1"}}
</div>
<div class="down"><a href="{% url 'left-wins' %}">◥◤</a></div>
</div> </div>
<div class="down"><a href="{% url 'left-wins' %}">▼</a></div>
</div>
</div> </div>
</body> </body>
</html> </html>