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

33
templates/index.html
Unescape View File

@ -20,7 +20,6 @@
<body>
<div class="leaderboard">
<h1 style="text-align: center">Leaderboard</h1>
<div class="leaderboard-contiainer">
{% for person in leaderboard %}
<div class="lb-entry">
<img src="{{url_for('static', filename=person.name + '.png')}}">
@ -29,45 +28,38 @@
</div>
{% endfor %}
</div>
</div>
<div class="right-pane">
<h1 style="padding-left: 40pt">Next Meal</h1>
<h1>When: {{date}}</h1>
<h2>Cook</h2>
<div class="cook-entry">
<div class="cook-card">
<span>date: {{ date }}</span>
<div class="flex-card">
{% if cook.confirmed == "no" %}
<img src="{{url_for('static', filename='question.png')}}">
<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="location.href='/volunteer';"><span>VOLUNTEER</span></div>
<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>
<div class="rect-button" onclick="location.href='/volunteer';" style="background-color: #EE7500;">VOLUNTEER</div>
{% else %}
<img src="{{url_for('static', filename= cook.name + '.png')}}">
<span>{{ cook.name }}</span>
<div class="rect-button" style="background-color: #8faf38; cursor: default;"><span>CONFIRMED</span></div>
<div class="rect-button" style="background-color: #8faf38; cursor: default;">CONFIRMED</div>
{% endif %}
</div></div>
</div>
<h2>Eaters</h2>
{% for eater in eaters %}
<div class="eater-entry">
<div class="eater-card">
<div class="flex-card">
<img src="{{url_for('static', filename=eater + '.png')}}">
<span>{{ eater }}</span>
</div></div>
</div>
{% endfor %}
{% if not current_user.name in eaters %}
<div class="eater-entry" style="height: 60pt;">
<div class="add-button" onclick="location.href='/addme';"><span><i class="fa fa-plus" aria-hidden="true"></i></span></div>
<div class="flex-card" style="background: none; box-shadow: none">
<div class="round-button" onclick="location.href='/addme';"><i class="fa fa-plus" aria-hidden="true"></i></div>
<span>Add me</span>
</div>
{% else %}
<div class="eater-entry" style="height: 60pt;">
<div class="add-button" onclick="location.href='/removeme';"><span><i class="fa fa-minus" aria-hidden="true"></i></span></div>
<div class="flex-card" style="background: none; box-shadow: none">
<div class="round-button" onclick="location.href='/removeme';"><i class="fa fa-minus" aria-hidden="true"></i></div>
<span>Remove me</span>
</div>
{% endif %}
</div>
<div class="user-card">
<img src="{{url_for('static', filename=current_user.name + '.png')}}">
<div class="user-info">
@ -75,5 +67,6 @@
<div class="rect-button" onclick="location.href='/logout';" style="background-color: #EE7500;">LOGOUT</div>
</div>
</div>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save