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

Added cards and other style and shit

Browse Source
master
7 years ago
parent 66032efdc9
commit 8f98579345
2 changed files with 272 additions and 231 deletions
Show Stats Download Patch File Download Diff File

468
static/style.css
Unescape View File

@ -1,212 +1,258 @@
html { html {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { h1 {
} }
h2 { h2 {
padding-left: 40pt; padding-left: 40pt;
} }
.leaderboard { .leaderboard {
width: 35%; width: 35%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; bottom: 0;
padding-top: 8pt; left: 0;
height: 100%; padding-top: 8pt;
background-color: rgba(0,0,0,0.8); height: auto;
color: #d4d0cd; background-color: rgba(0,0,0,0.8);
} color: #d4d0cd;
}
.next-meal {
width: 45%; .next-meal {
height: 100%; width: 45%;
position: absolute; height: 100%;
top: 0; position: absolute;
left: 35%; top: 0;
padding-top: 8pt; left: 35%;
} padding-top: 8pt;
}
.lb-entry {
padding: 0; .lb-entry {
height: 60pt; padding: 0;
position: relative; height: 60pt;
} position: relative;
}
.lb-entry img {
height: 50pt; .lb-entry img {
width: auto; height: 50pt;
position: absolute; width: auto;
top: 50%; position: absolute;
left: 25pt; top: 50%;
margin-top: -25pt; left: 25pt;
} margin-top: -25pt;
}
.lb-entry span.score {
position: absolute; .lb-entry span.score {
font-size: 16pt; position: absolute;
top: 50%; font-size: 16pt;
margin-top: -8pt; top: 50%;
left: 70%; margin-top: -8pt;
} left: 70%;
}
.lb-entry span.name {
position: absolute; .lb-entry span.name {
font-size: 16pt; position: absolute;
top: 50%; font-size: 16pt;
margin-top: -8pt; top: 50%;
left: 30%; margin-top: -8pt;
} left: 30%;
}
.cook-entry {
padding: 0; .cook-entry {
height: 60pt; padding: 0;
position: relative; /*height: 90pt;*/
} position: relative;
}
.cook-entry img {
height: 50pt; .cook-card {
width: auto; background-color: #F1EDEA;
position: absolute; height: 100pt;
top: 50%; margin-left: 20pt;
left: 40pt; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
margin-top: -25pt; -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);
}
.cook-entry span {
position: absolute; .cook-card img {
font-size: 16pt; height: 50pt;
top: 50%; width: auto;
margin-top: -8pt; position: absolute;
left: 120pt; top: 50%;
} left: 40pt;
margin-top: -25pt;
.eater-entry { }
padding: 0;
height: 60pt; #cook-small-thumb {
position: relative; height: 20pt;
} width: auto;
position: relative;
.eater-entry img { left: 0;
height: 50pt; top: 0;
width: auto; }
position: absolute;
top: 50%; .cook-card span {
left: 40pt; position: absolute;
margin-top: -25pt; font-size: 16pt;
} top: 50%;
margin-top: -8pt;
.eater-entry span { left: 120pt;
position: absolute; }
font-size: 16pt;
top: 50%; .cook-card p {
margin-top: -8pt; position: absolute;
left: 120pt; left: 140pt;
} margin: -16pt 0 0 0;
font-size: 11pt;
.rect-button { height: 24pt;
width: 100pt; top: 50%;
height: 25pt; text-align: center;
background-color: #EE7500; }
position: relative;
color: white; .eater-entry {
left: 220pt; padding: 0;
margin-top: 3pt; position: relative;
cursor: pointer; }
}
.eater-card {
.rect-button span { background-color: #F1EDEA;
font-size: 12pt; height: 70pt;
position: absolute; width: 200pt;
top: 50%; margin: 6pt 0 6pt 20pt;
margin-top: -6pt; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
left: 0; -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
width: 100%; box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
text-align: center; }
color: white;
} .eater-card img {
height: 50pt;
.add-button { width: auto;
height: 50pt; position: absolute;
width: 50pt; top: 50%;
position: absolute; left: 40pt;
top: 50%; margin-top: -25pt;
left: 40pt; }
margin-top: -25pt;
color: white; .eater-card span {
border-radius: 25pt; position: absolute;
background-color: #EE7500; font-size: 16pt;
cursor: pointer; top: 50%;
} margin-top: -8pt;
left: 120pt;
.add-button span { }
font-size: 34pt;
position: absolute; .eater-entry span {
top: 50%; position: absolute;
margin-top: -18pt; font-size: 16pt;
left: 0; top: 50%;
width: 100%; margin-top: -8pt;
text-align: center; left: 120pt;
} }
.user-info { .rect-button {
width: 19%; width: 100pt;
height: 100%; height: 26pt;
position: absolute; background-color: #EE7500;
left: 80%; position: absolute;
} color: white;
top: 50%;
.user-card { right: 32pt;
height: 80pt; margin-top: -13pt;
position: relative; cursor: pointer;
background-color: #F1EDEA; }
-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); .rect-button span {
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5); font-size: 12pt;
} position: absolute;
top: 50%;
.user-card img{ margin-top: -6pt;
width: 50pt; left: 0;
height: auto; width: 100%;
position: absolute; text-align: center;
top: 50%; color: white;
left: 8pt; }
margin-top: -25pt;
} .add-button {
height: 50pt;
.user-card span { width: 50pt;
font-size: 16pt; position: absolute;
position: absolute; top: 50%;
top: 30%; left: 40pt;
left: 75pt; margin-top: -25pt;
margin-top: -8pt; color: white;
width: 90pt; border-radius: 25pt;
text-align: center; background-color: #EE7500;
} cursor: pointer;
}
.logout-button {
width: 90pt; .add-button span {
height: 25pt; font-size: 34pt;
background-color: #EE7500; position: absolute;
position: absolute; top: 50%;
color: white; margin-top: -18pt;
left: 75pt; left: 0;
top: 70%; width: 100%;
margin-top: -13pt; text-align: center;
cursor: pointer; }
}
.user-info {
.logout-button span { width: 19%;
font-size: 12pt; height: 100%;
position: absolute; position: absolute;
top: 50%; left: 80%;
margin-top: -6pt; }
left: 0;
width: 100%; .user-card {
text-align: center; height: 80pt;
color: white; position: relative;
background-color: #F1EDEA;
-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);
}
.user-card img{
width: 50pt;
height: auto;
position: absolute;
top: 50%;
left: 8pt;
margin-top: -25pt;
}
.user-card span {
font-size: 16pt;
position: absolute;
top: 30%;
left: 75pt;
margin-top: -8pt;
width: 90pt;
text-align: center;
}
.logout-button {
width: 90pt;
height: 25pt;
background-color: #EE7500;
position: absolute;
color: white;
left: 75pt;
top: 70%;
margin-top: -13pt;
cursor: pointer;
}
.logout-button span {
font-size: 12pt;
position: absolute;
top: 50%;
margin-top: -6pt;
left: 0;
width: 100%;
text-align: center;
color: white;
} }

35
templates/index.html
Unescape View File

@ -32,43 +32,38 @@
<h1 style="padding-left: 40pt">Next Meal</h1> <h1 style="padding-left: 40pt">Next Meal</h1>
<h2>Cook</h2> <h2>Cook</h2>
<div class="cook-entry"> <div class="cook-entry">
<img src="{{url_for('static', filename=cook.name + '.png')}}"> <div class="cook-card">
<span>{{ cook.name }}</span> {% if cook.confirmed == "no" %}
{% if cook.name == current_user.name %} <img src="{{url_for('static', filename='question.png')}}">
{% if cook.confirmed == "no" %} <p>If nobody volunteers,<br><br><img id="cook-small-thumb" src="{{url_for('static', filename=cook.name + '.png')}}"> will cook.</p>
<div class="rect-button" onclick="confirm()"><span>CONFIRM</span></div> <div class="rect-button" onclick="volunteer()"><span>VOLUNTEER</span></div>
<div class="rect-button" onclick="bail()"><span>BAIL</span></div>
{% else %}
<div class="rect-button" style="background-color: #8faf38"><span>CONFIRMED</span></div>
{% endif %}
{% else %} {% else %}
{% if cook.confirmed == "no" %} <img src="{{url_for('static', filename= current_user.name + '.png')}}">
<div class="rect-button" onclick="confirm()"><span></span></div> <span>{{ cook.name }}</span>
{% else %} <div class="rect-button" style="background-color: #8faf38; cursor: default;"><span>CONFIRMED</span></div>
<div class="rect-button" style="background-color: #8faf38"><span>CONFIRMED</span></div>
{% endif %}
{% endif %} {% endif %}
</div> </div></div>
<h2>Eaters</h2> <h2>Eaters</h2>
{% for eater in eaters %} {% for eater in eaters %}
<div class="eater-entry"> <div class="eater-entry">
<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 cook.name != current_user.name %}
{% if not current_user.name in eaters %} {% if not current_user.name in eaters %}
<div class="eater-entry"> <div class="eater-entry" style="height: 60pt;">
<div class="add-button" onclick="addme()"><span><i class="fa fa-plus" aria-hidden="true"></i></span></div> <div class="add-button" onclick="addme()"><span><i class="fa fa-plus" aria-hidden="true"></i></span></div>
<span>Add me</span> <span>Add me</span>
</div> </div>
{% else %} {% else %}
<div class="eater-entry"> <div class="eater-entry" style="height: 60pt;">
<div class="add-button" onclick="removeme()"><span><i class="fa fa-minus" aria-hidden="true"></i></span></div> <div class="add-button" onclick="removeme()"><span><i class="fa fa-minus" aria-hidden="true"></i></span></div>
<span>Remove me</span> <span>Remove me</span>
</div> </div>
{% endif %} {% endif %}
{% endif %}
</div> </div>
<div class="user-info"> <div class="user-info">
<div class="user-card"> <div class="user-card">

Write Preview
Loading…
Cancel
Save