Commit bcd93a29 authored by Erma Safira Nurmasyita's avatar Erma Safira Nurmasyita
Browse files
parents 44565420 7b04b010
......@@ -42,8 +42,10 @@ class Header {
<span class="yellow-text">Pro</span>-Book
</div>
<div class="flex-item-header">
<div class="underline-text white-text flex-item-center">
Hi, '.$name.'
<div class="text-size-20 white-text flex-item-center add-nunito-font">
<div class="c-border-bottom">
Hi, '.$name.'
</div>
</div>
<a href="/logout" class="flex-item-header orange-background" >
<img src="../svgIcon/power-button.svg" class="turn-off-button">
......@@ -72,17 +74,17 @@ class Header {
<div class="flex-1 ">
<a href="'.self::URL_BROWSE.'">
<div>
BROWSE
<span class="text-size-40">B</span>ROWSE
</div>
</a>
</div>
<div class="left-right-border orange-background flex-1 ">
HISTORY
<span class="text-size-40">H</span>ISTORY
</div>
<div class="flex-1 ">
<a href="'.self::URL_PROFILE.'">
<div>
PROFILE
<span class="text-size-40">P</span>ROFILE
</div>
</a>
</div>
......@@ -93,19 +95,19 @@ class Header {
return '
<div class="flex-container-menu">
<div class="orange-background flex-1 ">
BROWSE
<span class="text-size-40">B</span>ROWSE
</div>
<div class="left-right-border flex-1 ">
<a href="'.self::URL_HISTORY.'">
<div>
HISTORY
<span class="text-size-40">H</span>ISTORY
</div>
</a>
</div>
<div class="flex-1 ">
<a href="'.self::URL_PROFILE.'">
<div>
PROFILE
<span class="text-size-40">P</span>ROFILE
</div>
</a>
</div>
......@@ -118,19 +120,19 @@ class Header {
<div class="flex-1 ">
<a href="'.self::URL_BROWSE.'">
<div>
BROWSE
<span class="text-size-40">B</span>ROWSE
</div>
</a>
</div>
<div class="left-right-border flex-1 ">
<a href="'.self::URL_HISTORY.'">
<div>
HISTORY
<span class="text-size-40">H</span>ISTORY
</div>
</a>
</div>
<div class="orange-background flex-1 ">
PROFILE
<span class="text-size-40">P</span>ROFILE
</div>
</div>';
}
......
......@@ -6,14 +6,15 @@ function viewBrowse (array $params) {
echo Header::generateHeadWithJS('Browse', 'browse', 'browse');
$searchForm = '
<div class="flex-container-search-form orange-text" >
<label class="search-box-text" >Search Box</label>
<label class="search-box-text" >Search Book</label>
</div>
<form id="searchForm" method="GET" action="search_result">
<div class="flex-container-search-form margin-top-bottom-10">
<input id="inputSearch" class="full-width" type="text" name="search_text" placeholder="Input search terms...">
<div class="flex-container-search-form margin-top-bottom-10 add-flex-direction-column">
<p id="warning-empty-input" class="red-theme alert-box text-size-20 add-nunito-font c-round">Input can\'t be empty</p>
<input id="inputSearch" class="text-size-20 full-width c-input add-border-gray c-round" type="text" name="search_text" placeholder="Input search terms...">
</div>
<div class="flex-container-search-form add-flex-end-justify margin-top-bottom-10">
<button type="button" class="c-button light-blue c-round" onclick="trySubmitSearch()">
<button id="submit-button" type="button" class="text-size-30 add-nunito-font c-button light-blue c-round" onclick="trySubmitSearch()">
Search
</button>
</div>
......
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: url(../fonts/nunito.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Bold';
font-style: normal;
font-weight: 700;
src: url(../fonts/nunito-bold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Semi Bold';
font-style: normal;
font-weight: 600;
src: url(../fonts/nunito-semi-bold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
margin: 0
}
.add-nunito-font {
font-family: 'Nunito', sans-serif !important;
}
a {
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
......@@ -113,3 +140,28 @@ a {
.align-items-flex-end {
align-items: flex-end !important;
}
.c-input {
padding: 8px;
display: block;
border: none;
width: 100%;
}
.c-border-bottom {
border-bottom: 1px solid white!important;
}
.alert-box:before,
.alert-box:after {
content: "";
display: table;
clear: both
}
.alert-box {
padding: 0 4px;
margin-top: 1px;
margin-bottom: 1px;
}
\ No newline at end of file
......@@ -8,9 +8,23 @@
.search-box-text {
margin-top: 25px;
margin-bottom: 25px;
font-family: 'Nunito Bold', sans-serif;
}
.margin-top-bottom-10 {
margin-top: 20px;
margin-bottom: 20px;
}
#inputSearch {
font-family: 'Nunito', sans-serif !important;
}
#submit-button {
padding: 4px 48px !important;
}
#warning-empty-input {
display: none;
}
\ No newline at end of file
......@@ -7,7 +7,11 @@
}
.orange-text {
color: #F16303;
color: #F16303 !important;
}
.gray-text {
color: #4D4D4D !important;
}
.orange-background {
......@@ -17,4 +21,13 @@
.light-blue {
color: #fff!important;
background-color: #00B1EC !important;
}
.add-border-gray {
border: 2px solid #888888!important
}
.red-theme {
color: #fff!important;
background-color: #f44336!important
}
\ No newline at end of file
......@@ -52,6 +52,7 @@
display: flex;
align-items: stretch;
background-color: #0392CC;
font-family: 'Nunito', sans-serif !important;
}
.flex-container-menu > div {
......@@ -59,7 +60,7 @@
color: white;
text-align: center;
line-height: 60px;
font-size: 20px;
font-size: 30px;
}
.flex-container-menu > div:hover {
......@@ -77,4 +78,4 @@
border-right-width: 0.5px;
border-top-width: 0;
border-bottom-width: 0;
}
\ No newline at end of file
}
......@@ -5,6 +5,7 @@
align-items: stretch;
margin-top: 30px;
margin-bottom: 30px;
font-family: 'Nunito', sans-serif;
}
.flex-history-item > div {
......@@ -19,6 +20,7 @@
#label-history {
margin-top: 35px;
margin-bottom: 35px;
font-family: 'Nunito Bold', sans-serif;
}
#label-history-div {
......@@ -35,4 +37,9 @@
justify-content: space-between;
}
.title-item-history {
font-family: 'Nunito Semi Bold', sans-serif !important;
line-height: 40px;
}
/* flex-container add-flex-direction-column align-content-space-between flex-1 */
\ No newline at end of file
......@@ -45,13 +45,19 @@
#label-text-my-profile {
margin-top: 35px;
margin-bottom: 35px;
font-family: 'Nunito Bold', sans-serif;
}
#profile-data-table {
padding-left: 200px;
padding-right: 200px;
font-family: 'Nunito', sans-serif;
}
.icon-profile {
width: 20px;
margin-right: 10px;
}
#username {
font-family: 'Nunito', sans-serif !important;
}
\ No newline at end of file
......@@ -43,14 +43,14 @@ class historyView {
<img class="history-image-item" src="'.$data['imgSource'].'">
</div>
<div class="flex-2" >
<div class="orange-text text-size-50" >'.$data['itemName'].'</div>
<div class="text-size-30">Jumlah : '.$data['numberOfItem'].'</div>
<div class="text-size-30">Anda belum memberikan review</div>
<div class="orange-text text-size-40 title-item-history" >'.$data['itemName'].'</div>
<div class="text-size-20 gray-text">Jumlah : '.$data['numberOfItem'].'</div>
<div class="text-size-20 gray-text">Anda belum memberikan review</div>
</div>
<div id="right-most-column-history-item">
<div class="flex-container align-items-flex-end add-flex-direction-column ">
<div class="font-weight-bold">'.$data['date'].'</div>
<div class="font-weight-bold">Nomor Order #'.$data['orderNumber'].'</div>
<div class="font-weight-bold text-size-20 gray-text">'.$data['date'].'</div>
<div class="font-weight-bold text-size-20 gray-text">Nomor Order : #'.$data['orderNumber'].'</div>
</div>
<div class="flex-container add-flex-end-justify ">
<a href="'.$data['reviewUrl'].'" class="c-button light-blue c-round">Review</a>
......@@ -70,14 +70,14 @@ class historyView {
<img class="history-image-item" src="'.$data['imgSource'].'">
</div>
<div class="flex-2" >
<div class="orange-text text-size-50" >'.$data['itemName'].'</div>
<div class="text-size-30">Jumlah : '.$data['numberOfItem'].'</div>
<div class="text-size-30">Anda sudah memberikan review</div>
<div class="orange-text text-size-40 title-item-history" >'.$data['itemName'].'</div>
<div class="text-size-20 gray-text ">Jumlah : '.$data['numberOfItem'].'</div>
<div class="text-size-20 gray-text">Anda sudah memberikan review</div>
</div>
<div id="right-most-column-history-item">
<div class="flex-container align-items-flex-end add-flex-direction-column ">
<div class="font-weight-bold">'.$data['date'].'</div>
<div class="font-weight-bold">Nomor Order #'.$data['orderNumber'].'</div>
<div class="font-weight-bold gray-text">'.$data['date'].'</div>
<div class="font-weight-bold gray-text">Nomor Order #'.$data['orderNumber'].'</div>
</div>
</div>
</div>
......
......@@ -5,8 +5,17 @@ function IsEmptyInputSearch() {
function trySubmitSearch() {
if (IsEmptyInputSearch()) {
alert("text can't be empty");
document.getElementById("warning-empty-input").style.display = 'table';
} else {
document.getElementById('inputForm').submit();
document.getElementById('searchForm').submit();
}
}
\ No newline at end of file
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('inputSearch').addEventListener('keypress', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
trySubmitSearch();
}
});
}, false);
\ No newline at end of file
......@@ -9,7 +9,7 @@ function viewProfile (array $params) {
<div class="flex-1"></div>
<div class="flex-2">
<img class="profile-photo margin-20" src="uploads/'.$params['profile_picture'].'">
<div>'.$params['name'].'</div>
<div id="username" class="text-size-50">'.$params['name'].'</div>
</div>
<a class="flex-container add-flex-end-justify flex-1 " href="edit_profile">
<img src="../svgIcon/pencil-alt.svg" id="edit-profile-button" >
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment