Fixed some styling

master
Davide Bongiovanni 6 years ago
parent 60ae824f2a
commit cdc6284d5c

@ -1,5 +1,8 @@
html { html {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
}
body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -13,7 +16,7 @@ h2 {
.leaderboard { .leaderboard {
width: 35%; width: 35%;
position: absolute; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -23,8 +26,8 @@ h2 {
color: #d4d0cd; color: #d4d0cd;
} }
.next-meal { .right-pane {
width: 45%; width: 65%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
@ -153,7 +156,7 @@ h2 {
left: 120pt; left: 120pt;
} }
.rect-button { /*.rect-button {
width: 100pt; width: 100pt;
height: 26pt; height: 26pt;
background-color: #EE7500; background-color: #EE7500;
@ -163,7 +166,7 @@ h2 {
right: 32pt; right: 32pt;
margin-top: -13pt; margin-top: -13pt;
cursor: pointer; cursor: pointer;
} }*/
.rect-button span { .rect-button span {
font-size: 12pt; font-size: 12pt;
@ -199,38 +202,32 @@ h2 {
text-align: center; text-align: center;
} }
.user-info {
width: 19%;
height: 100%;
position: absolute;
left: 80%;
}
.user-card { .user-card {
height: 80pt; display: flex;
position: relative; position: absolute;
top: 10px;
right: 10px;
background-color: #F1EDEA; background-color: #F1EDEA;
-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);
} }
.user-card img{ .user-info {
width: 50pt; display: flex;
height: auto; flex-direction: column;
position: absolute; justify-content: space-evenly;
top: 50%; padding: 10px;
left: 8pt; }
margin-top: -25pt;
.user-card img {
width: 80px;
height: 80px;
margin: 10px;
} }
.user-card span { .user-card span {
font-size: 16pt; font-size: 16pt;
position: absolute;
top: 30%;
left: 75pt;
margin-top: -8pt;
width: 90pt;
text-align: center; text-align: center;
} }
@ -246,6 +243,18 @@ h2 {
cursor: pointer; cursor: pointer;
} }
.rect-button {
width: 90px;
height: 25px;
line-height: 25px;
text-align: center;
vertical-align: middle;
color: white;
cursor: pointer;
padding: 4px;
margin: 10px;
}
.logout-button span { .logout-button span {
font-size: 12pt; font-size: 12pt;
position: absolute; position: absolute;
@ -255,4 +264,4 @@ h2 {
width: 100%; width: 100%;
text-align: center; text-align: center;
color: white; color: white;
} }

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>KUKapp</title> <title>Meal planned for {{meal_date}} - KUKAPP</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}"> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<script src="{{ url_for('static', filename='script.js') }}"></script> <script src="{{ url_for('static', filename='script.js') }}"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
@ -13,6 +13,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% auto; background-size: 100% auto;
background-color: #aeaeac; background-color: #aeaeac;
background-attachment: fixed;
} }
</style> </style>
</head> </head>
@ -29,7 +30,7 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<div class="next-meal"> <div class="right-pane">
<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">
@ -67,11 +68,11 @@
{% endif %} {% endif %}
</div> </div>
<div class="user-info"> <div class="user-card">
<div class="user-card"> <img src="{{url_for('static', filename=current_user.name + '.png')}}">
<img src="{{url_for('static', filename=current_user.name + '.png')}}"> <div class="user-info">
<span>{{current_user.name}}</span> <span>{{current_user.name}}</span>
<div class="logout-button" onclick="location.href='/logout';"><span>LOGOUT</span></div> <div class="rect-button" onclick="location.href='/logout';" style="background-color: #EE7500;">LOGOUT</div>
</div> </div>
</div> </div>
</body> </body>

Loading…
Cancel
Save