vbatts/microservices-demo
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

style fixes

Browse source
This commit is contained in:
Megan O'Keefe 2020-04-22 18:56:45 -04:00
parent 65c5c3ebf1
commit 25486dda33
3 changed files with 104 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/static/icons/Hipster_CurrencyIcon.svg
View file

@ -2,7 +2,7 @@
<defs> <defs>
<style> <style>
.cls-1 { .cls-1 {
fill: #605f64; fill: #b4b2bb;
} }
</style> </style>
</defs> </defs>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 693 B

After

Width:  |  Height:  |  Size: 693 B

Before After
Before After

94
src/frontend/static/styles/styles.css
View file

@ -65,7 +65,7 @@ header .h-control {
font-size: 14px; font-size: 14px;
position: relative; position: relative;
margin-left: 40px; margin-left: 40px;
color: #605f64; color: #b4b2bb;
outline:none !important; outline:none !important;
} }
@ -87,7 +87,7 @@ header .h-control input {
width: 250px; width: 250px;
height: 24px; height: 24px;
flex-shrink: 0; flex-shrink: 0;
background-color: #f2f2f2; background-color: #b4b2bb;
display: flex; display: flex;
align-items: center; align-items: center;
outline:none !important; outline:none !important;
@ -135,25 +135,25 @@ header .h-control select {
header .h-control::-webkit-input-placeholder { header .h-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */ /* Chrome/Opera/Safari */
font-size: 14px; font-size: 14px;
color: #605f64; color: #b4b2bb;
} }
header .h-control::-moz-placeholder { header .h-control::-moz-placeholder {
/* Firefox 19+ */ /* Firefox 19+ */
font-size: 14px; font-size: 14px;
color: #605f64; color: #b4b2bb;
} }
header .h-control :-ms-input-placeholder { header .h-control :-ms-input-placeholder {
/* IE 10+ */ /* IE 10+ */
font-size: 14px; font-size: 14px;
color: #605f64; color: #b4b2bb;
} }
header .h-control :-moz-placeholder { header .h-control :-moz-placeholder {
/* Firefox 18- */ /* Firefox 18- */
font-size: 14px; font-size: 14px;
color: #605f64; color: #b4b2bb;
} }
@ -185,7 +185,8 @@ header .navbar.sub-navbar nav a {
} }
header .navbar.sub-navbar .controls { header .navbar.sub-navbar .controls {
display: flex; display: inline-block;
text-align: center;
height: 60px; height: 60px;
} }
@ -199,6 +200,30 @@ header .navbar.sub-navbar .controls a {
justify-content: center; justify-content: center;
} }
header .navbar.sub-navbar .controls-div {
display: block;
width: 120px;
border-left: 1px solid #b4b2bb;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
header .navbar.sub-navbar form .controls-form {
background-color: #111111;
display: block;
width: 120px;
border-left: 1px solid #b4b2bb;
display: inline-block;
flex-flow: column;
align-items: center;
justify-content: center;
text-align: center;
}
header .navbar.sub-navbar .controls a img { header .navbar.sub-navbar .controls a img {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -209,6 +234,49 @@ header .navbar.sub-navbar .controls a:last-child {
border-right: 1px solid #b4b2bb; border-right: 1px solid #b4b2bb;
} }
form .currency {
height: auto;
background-color: #111111;
font-size: 15px;
color: #b4b2bb;
padding-top: 5px;
padding-bottom: 0;
padding-right: 30px;
align-items: center;
display: flex;
border: none;
}
span .currency-icon {
padding-bottom: 2px;
padding-top: 20px;
display: inline-block;
}
span.buffer {
padding-top: 3px;
display: inline-block;
}
select .currency {
padding-left: 10px;
padding-top: 2px;
align-items: center;
background-color: #111111;
padding-right: 30px;
border: none;
}
option .currency {
padding-left: 10px;
align-items: center;
background-color: #111111;
padding-right: 30px;
border: none;
}
/*footer*/ /*footer*/
footer.py-5 { footer.py-5 {
@ -603,15 +671,3 @@ select {
-webkit-appearance: none; -webkit-appearance: none;
-webkit-border-radius: 0px; -webkit-border-radius: 0px;
} }
form #currency_form {
border: none;
padding: 0 31px 0 31px;
width: 250px;
height: 24px;
flex-shrink: 0;
background-color: #f2f2f2;
display: flex;
align-items: center;
outline:none !important;
}

61
src/frontend/templates/header.html
View file

@ -6,7 +6,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Online Boutique Shop</title> <title>Online Boutique</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous"> crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
@ -19,38 +19,6 @@
<body> <body>
<header> <header>
<div class="navbar">
<div class="container d-flex justify-content-between">
<div class="h-free-shipping"><span>FREE</span> shipping with $75 purchase &nbsp;&nbsp;<span>see details</span></div>
<div class="h-controls">
<div class="h-control">
<img src="/static/icons/Hipster_SearchIcon.svg" alt="icon" class="icon search-icon" />
<input type="text" placeholder="What are you looking for today?" />
</div>
<div class="h-control">
<img src="/static/icons/Hipster_ProfileIcon.svg" alt="icon" class="icon" />
<span>My Account</span>
</div>
<div class="h-control">
<img src="/static/icons/Hipster_HelpIcon.svg" alt="icon" class="icon" />
<span>Help</span>
</div>
<div class="h-control">
{{ if $.currencies }}
<img src="/static/icons/Hipster_CurrencyIcon.svg" alt="icon" class="icon" />
<form method="POST" action="/setCurrency" id="currency_form">
<select name="currency_code" class="h-control"
onchange="document.getElementById('currency_form').submit();" style="width:auto;">
{{range $.currencies}}
<option class="h-control" value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
{{end}}
</select>
</form>
{{ end }}
</div>
</div>
</div>
</div>
<div class="navbar sub-navbar"> <div class="navbar sub-navbar">
<div class="container d-flex justify-content-between"> <div class="container d-flex justify-content-between">
<a href="/" class="navbar-brand d-flex align-items-center"> <a href="/" class="navbar-brand d-flex align-items-center">
@ -58,7 +26,34 @@
</a> </a>
<nav> <nav>
</nav> </nav>
<div class="controls"> <div class="controls">
{{ if $.currencies }}
<span> <form method="POST" class="controls-form" action="/setCurrency" id="currency_form" >
<span class="buffer"></span>
<span class="currency-icon"><img src="/static/icons/Hipster_CurrencyIcon.svg" alt="currency-icon" class="icon" /></span>
<select class="currency" name="currency_code"
onchange="document.getElementById('currency_form').submit();">
{{range $.currencies}}
<option class="currency" value="{{.}}" {{if eq . $.user_currency}}selected="selected"{{end}}>{{.}}</option>
{{end}}
</select>
</form>
</span>
{{ end }}
<a href="/cart"> <a href="/cart">
<img src="/static/icons/Hipster_CheckOutIcon.svg" alt="cart-icon" class="logo" /> <img src="/static/icons/Hipster_CheckOutIcon.svg" alt="cart-icon" class="logo" />
<span>View Cart <span>View Cart