davide
/
KUKapp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Major restyling. Now with better HTML and CSS practices!

Browse Source
master
Davide Bongiovanni 6 years ago
parent 6c5b5e3432
commit e44d43af0e
2 changed files with 84 additions and 178 deletions
Show Stats Download Patch File Download Diff File

195
static/style.css
Unescape View File

@ -8,166 +8,88 @@ body {
} }
h1 { h1 {
margin-left: 3%;
} }
h2 { h2 {
padding-left: 40pt; margin-left: 3%;
}
.right-pane {
width: 70%;
height: 100%;
position: absolute;
top: 0;
left: 30%;
} }
.leaderboard { .leaderboard {
width: 35%;
position: fixed; position: fixed;
width: 30%;
top: 0; top: 0;
bottom: 0;
left: 0; left: 0;
padding-top: 8pt; height: 100%;
height: auto;
background-color: rgba(0,0,0,0.8); background-color: rgba(0,0,0,0.8);
color: #d4d0cd; color: #d4d0cd;
} overflow: auto;
.right-pane {
width: 65%;
height: 100%;
position: absolute;
top: 0;
left: 35%;
padding-top: 8pt;
} }
.lb-entry { .lb-entry {
padding: 0; display: flex;
height: 60pt; justify-content: space-around;
position: relative;
} }
.lb-entry img { .lb-entry img {
height: 50pt; height: 80px;
width: auto; width: 80px;
position: absolute; margin: 10px 0;
top: 50%;
left: 25pt;
margin-top: -25pt;
}
.lb-entry span.score {
position: absolute;
font-size: 16pt;
top: 50%;
margin-top: -8pt;
left: 70%;
}
.lb-entry span.name {
position: absolute;
font-size: 16pt;
top: 50%;
margin-top: -8pt;
left: 30%;
} }
.cook-entry { .lb-entry span {
padding: 0; margin: auto 0;
/*height: 90pt;*/ font-size: 20px;
position: relative;
} }
.cook-card { .flex-card {
margin: 8px auto;
display: flex;
width: fit-content;
min-width: 240px;
background-color: #F1EDEA; background-color: #F1EDEA;
height: 100pt; margin-left: 3%;
margin-left: 20pt;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
} }
.cook-card img { .flex-card img {
height: 50pt; height: 80px;
width: auto; width: 80px;
position: absolute; margin: 16px 20px;
top: 50%;
left: 40pt;
margin-top: -25pt;
}
#cook-small-thumb {
height: 20pt;
width: auto;
position: relative;
left: 0;
top: 0;
}
.cook-card span {
position: absolute;
font-size: 16pt;
top: 50%;
margin-top: -8pt;
left: 120pt;
}
.cook-card p {
position: absolute;
left: 140pt;
margin: -16pt 0 0 0;
font-size: 11pt;
height: 24pt;
top: 50%;
text-align: center;
}
.eater-entry {
padding: 0;
position: relative;
} }
.eater-card { .flex-card .flex-small-thumb {
background-color: #F1EDEA; height: 32px;
height: 70pt; width: 32px;
width: 200pt; display: inline-block;
margin: 6pt 0 6pt 20pt; margin: -6px 0 0 0;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
} }
.eater-card img { .flex-card span {
height: 50pt; margin: auto 20px;
width: auto; font-size: 20px;
position: absolute;
top: 50%;
left: 40pt;
margin-top: -25pt;
} }
.eater-card span { .flex-card .rect-button {
position: absolute; margin: auto 20px;
font-size: 16pt;
top: 50%;
margin-top: -8pt;
left: 120pt;
} }
.eater-entry span { .flex-card p {
position: absolute; font-size: 14px;
font-size: 16pt; text-align: center;
top: 50%; line-height: 200%;
margin-top: -8pt;
left: 120pt;
} }
/*.rect-button {
width: 100pt;
height: 26pt;
background-color: #EE7500;
position: absolute;
color: white;
top: 50%;
right: 32pt;
margin-top: -13pt;
cursor: pointer;
}*/
.rect-button span { .rect-button span {
font-size: 12pt; font-size: 12pt;
position: absolute; position: absolute;
@ -179,27 +101,18 @@ h2 {
color: white; color: white;
} }
.add-button { .round-button {
height: 50pt; display: flex;
width: 50pt; align-items: center;
position: absolute; justify-content: center;
top: 50%;
left: 40pt;
margin-top: -25pt;
color: white; color: white;
border-radius: 25pt;
background-color: #EE7500; background-color: #EE7500;
cursor: pointer; cursor: pointer;
} width: 80px;
height: 80px;
.add-button span { border-radius: 40px;
font-size: 34pt; font-size: 48px;
position: absolute; margin: 16px 20px;
top: 50%;
margin-top: -18pt;
left: 0;
width: 100%;
text-align: center;
} }
.user-card { .user-card {

67
templates/index.html
Unescape View File

@ -20,59 +20,52 @@
<body> <body>
<div class="leaderboard"> <div class="leaderboard">
<h1 style="text-align: center">Leaderboard</h1> <h1 style="text-align: center">Leaderboard</h1>
<div class="leaderboard-contiainer"> {% for person in leaderboard %}
{% for person in leaderboard %} <div class="lb-entry">
<div class="lb-entry"> <img src="{{url_for('static', filename=person.name + '.png')}}">
<img src="{{url_for('static', filename=person.name + '.png')}}"> <span class="name">{{ person.name }}</span>
<span class="name">{{ person.name }}</span> <span class="score">{{ person.score }}</span>
<span class="score">{{ person.score }}</span>
</div>
{% endfor %}
</div> </div>
{% endfor %}
</div> </div>
<div class="right-pane"> <div class="right-pane">
<h1 style="padding-left: 40pt">Next Meal</h1> <h1>When: {{date}}</h1>
<h2>Cook</h2> <h2>Cook</h2>
<div class="cook-entry"> <div class="flex-card">
<div class="cook-card"> {% if cook.confirmed == "no" %}
<span>date: {{ date }}</span> <img src="{{url_for('static', filename='question.png')}}">
{% if cook.confirmed == "no" %} <p>If nobody volunteers,<br><img class="flex-small-thumb" src="{{url_for('static', filename=cook.name + '.png')}}" title="{{current_user.name}}" align="middle"> will cook.</p>
<img src="{{url_for('static', filename='question.png')}}"> <div class="rect-button" onclick="location.href='/volunteer';" style="background-color: #EE7500;">VOLUNTEER</div>
<p>If nobody volunteers,<br><br><img id="cook-small-thumb" src="{{url_for('static', filename=cook.name + '.png')}}"> will cook.</p> {% else %}
<div class="rect-button" onclick="location.href='/volunteer';"><span>VOLUNTEER</span></div> <img src="{{url_for('static', filename= cook.name + '.png')}}">
{% else %} <span>{{ cook.name }}</span>
<img src="{{url_for('static', filename= cook.name + '.png')}}"> <div class="rect-button" style="background-color: #8faf38; cursor: default;">CONFIRMED</div>
<span>{{ cook.name }}</span> {% endif %}
<div class="rect-button" style="background-color: #8faf38; cursor: default;"><span>CONFIRMED</span></div> </div>
{% endif %}
</div></div>
<h2>Eaters</h2> <h2>Eaters</h2>
{% for eater in eaters %} {% for eater in eaters %}
<div class="eater-entry"> <div class="flex-card">
<div class="eater-card">
<img src="{{url_for('static', filename=eater + '.png')}}"> <img src="{{url_for('static', filename=eater + '.png')}}">
<span>{{ eater }}</span> <span>{{ eater }}</span>
</div></div> </div>
{% endfor %} {% endfor %}
{% if not current_user.name in eaters %} {% if not current_user.name in eaters %}
<div class="eater-entry" style="height: 60pt;"> <div class="flex-card" style="background: none; box-shadow: none">
<div class="add-button" onclick="location.href='/addme';"><span><i class="fa fa-plus" aria-hidden="true"></i></span></div> <div class="round-button" onclick="location.href='/addme';"><i class="fa fa-plus" aria-hidden="true"></i></div>
<span>Add me</span> <span>Add me</span>
</div> </div>
{% else %} {% else %}
<div class="eater-entry" style="height: 60pt;"> <div class="flex-card" style="background: none; box-shadow: none">
<div class="add-button" onclick="location.href='/removeme';"><span><i class="fa fa-minus" aria-hidden="true"></i></span></div> <div class="round-button" onclick="location.href='/removeme';"><i class="fa fa-minus" aria-hidden="true"></i></div>
<span>Remove me</span> <span>Remove me</span>
</div> </div>
{% endif %} {% endif %}
<div class="user-card">
</div> <img src="{{url_for('static', filename=current_user.name + '.png')}}">
<div class="user-card"> <div class="user-info">
<img src="{{url_for('static', filename=current_user.name + '.png')}}"> <span>{{current_user.name}}</span>
<div class="user-info"> <div class="rect-button" onclick="location.href='/logout';" style="background-color: #EE7500;">LOGOUT</div>
<span>{{current_user.name}}</span> </div>
<div class="rect-button" onclick="location.href='/logout';" style="background-color: #EE7500;">LOGOUT</div>
</div> </div>
</div> </div>
</body> </body>

Write Preview
Loading…
Cancel
Save