Added cards and other style and shit

master
7 years ago
parent 66032efdc9
commit 8f98579345

@ -15,9 +15,10 @@ h2 {
width: 35%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
padding-top: 8pt;
height: 100%;
height: auto;
background-color: rgba(0,0,0,0.8);
color: #d4d0cd;
}
@ -64,11 +65,20 @@ h2 {
.cook-entry {
padding: 0;
height: 60pt;
/*height: 90pt;*/
position: relative;
}
.cook-entry img {
.cook-card {
background-color: #F1EDEA;
height: 100pt;
margin-left: 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);
}
.cook-card img {
height: 50pt;
width: auto;
position: absolute;
@ -77,7 +87,15 @@ h2 {
margin-top: -25pt;
}
.cook-entry span {
#cook-small-thumb {
height: 20pt;
width: auto;
position: relative;
left: 0;
top: 0;
}
.cook-card span {
position: absolute;
font-size: 16pt;
top: 50%;
@ -85,13 +103,32 @@ h2 {
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;
height: 60pt;
position: relative;
}
.eater-entry img {
.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);
}
.eater-card img {
height: 50pt;
width: auto;
position: absolute;
@ -100,6 +137,14 @@ h2 {
margin-top: -25pt;
}
.eater-card span {
position: absolute;
font-size: 16pt;
top: 50%;
margin-top: -8pt;
left: 120pt;
}
.eater-entry span {
position: absolute;
font-size: 16pt;
@ -110,12 +155,13 @@ h2 {
.rect-button {
width: 100pt;
height: 25pt;
height: 26pt;
background-color: #EE7500;
position: relative;
position: absolute;
color: white;
left: 220pt;
margin-top: 3pt;
top: 50%;
right: 32pt;
margin-top: -13pt;
cursor: pointer;
}

@ -32,43 +32,38 @@
<h1 style="padding-left: 40pt">Next Meal</h1>
<h2>Cook</h2>
<div class="cook-entry">
<img src="{{url_for('static', filename=cook.name + '.png')}}">
<span>{{ cook.name }}</span>
{% if cook.name == current_user.name %}
<div class="cook-card">
{% if cook.confirmed == "no" %}
<div class="rect-button" onclick="confirm()"><span>CONFIRM</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 %}
<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="volunteer()"><span>VOLUNTEER</span></div>
{% else %}
{% if cook.confirmed == "no" %}
<div class="rect-button" onclick="confirm()"><span></span></div>
{% else %}
<div class="rect-button" style="background-color: #8faf38"><span>CONFIRMED</span></div>
{% endif %}
<img src="{{url_for('static', filename= current_user.name + '.png')}}">
<span>{{ cook.name }}</span>
<div class="rect-button" style="background-color: #8faf38; cursor: default;"><span>CONFIRMED</span></div>
{% endif %}
</div>
</div></div>
<h2>Eaters</h2>
{% for eater in eaters %}
<div class="eater-entry">
<div class="eater-card">
<img src="{{url_for('static', filename=eater + '.png')}}">
<span>{{ eater }}</span>
</div>
</div></div>
{% endfor %}
{% if cook.name != current_user.name %}
{% 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>
<span>Add me</span>
</div>
{% 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>
<span>Remove me</span>
</div>
{% endif %}
{% endif %}
</div>
<div class="user-info">
<div class="user-card">

Loading…
Cancel
Save