diff --git a/public/style.css b/public/style.css index ea0a99559c762b1f8e82af2cfd350d8696d00320..e6d80d37def0f2bce18f755a1185cbcc5ce6012d 100644 --- a/public/style.css +++ b/public/style.css @@ -14,25 +14,42 @@ body { border-radius: 5px; } -.row:before, +.row:before, .row:after { - content:""; - display: table ; - clear:both; + content: ""; + display: table; + clear: both; } [class*='col-'] { - float: left; - min-height: 1px; - width: 16.66%; + float: left; + min-height: 1px; + width: 16.66%; } -.col-1{ width: 16.66%; } -.col-2{ width: 33.33%; } -.col-3{ width: 50%; } -.col-4{ width: 66.66%; } -.col-5{ width: 83.33%; } -.col-6{ width: 100%; } +.col-1 { + width: 16.66%; +} + +.col-2 { + width: 33.33%; +} + +.col-3 { + width: 50%; +} + +.col-4 { + width: 66.66%; +} + +.col-5 { + width: 83.33%; +} + +.col-6 { + width: 100%; +} .text-left { text-align: left; @@ -50,6 +67,27 @@ body { color: orange; } +.btn { + border-radius: 5px; + border: 1px solid black; + padding:5px 15px; + color: black; + text-decoration: none; + font-size: medium; +} + +.red { + background-color: red; +} + +.green { + background-color: chartreuse; +} + +.line-height-medium { + line-height: 30px; +} + /* ------------------------- HEADER -------------------------*/ .logo:after { @@ -58,19 +96,26 @@ body { display: inline-block; width: 210px; height: 100px; - content:""; + content: ""; } .tab { outline: 1px solid #004D40; - padding-top:10px; - padding-bottom:10px; + padding-top: 10px; + padding-bottom: 10px; font-weight: 900; + color: black; + text-decoration: none; } .tab.active { background-color: #00695C; - color : #FAFAFA; + color: #FAFAFA; +} + +.tab:hover { + background-color: #00695C; + color: #FAFAFA; } /* ------------------------- ICON -------------------------*/ @@ -87,34 +132,33 @@ body { } .icon:before { - font-family:'icon'; - font-style:normal; - font-weight:normal; - speak:none; - display:inline-block; - text-decoration:inherit; - width:1em; - height:1em; - font-size:1em; - text-align:center; - -webkit-font-smoothing:antialiased; - font-smoothing:antialiased; - text-rendering:optimizeLegibility + font-family: 'icon'; + font-style: normal; + font-weight: normal; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + height: 1em; + font-size: 1em; + text-align: center; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; + text-rendering: optimizeLegibility } .icon.icon-mail:before { - content:'\e0a5' + content: '\e0a5' } .icon.icon-phone:before { - content:'\e0c5' + content: '\e0c5' } -.icon.icon-star:before{ - content:'\e108' +.icon.icon-star:before { + content: '\e108' } - /* ------------------------- PROFIL -------------------------*/ .img-circle { @@ -125,12 +169,12 @@ body { } .img-profile { - width: 180px; - height: 180px; + width: 130px; + height: 130px; outline: 3px solid black; } -.profil>p { +.profil > p { line-height: 50%; } @@ -140,7 +184,7 @@ body { display: inline-block; width: 45px; height: 45px; - content:""; + content: ""; } a.edit:after { diff --git a/src/view/profil.php b/src/view/profil.php index f1571d98317092b7f26f677f2a71fbe862cc1e66..85e517f47683ebc2363239b378460552ae7c7ee0 100644 --- a/src/view/profil.php +++ b/src/view/profil.php @@ -15,9 +15,9 @@ </div> </div> <div class="row"> - <div class="col-2 tab text-center">ORDER</div> - <div class="col-2 tab text-center">HISTORY</div> - <div class="col-2 tab text-center active">MY PROFILE</div> + <a class="col-2 tab text-center" href="/main/order?u=<?=$id?>">ORDER</a> + <a class="col-2 tab text-center" href="/main/hostory?u=<?=$id?>">HISTORY</a> + <a class="col-2 tab text-center active" href="/main/profil?u=<?=$id?>">MY PROFILE</a> </div> <div class="row"> <div class="col-5"><h1>MY PROFILE</h1></div> diff --git a/src/view/profil_edit.php b/src/view/profil_edit.php index 7966a4453b3beaa2c0479290e524c457b53b0a8c..0b790460857bfdbb377b5a28dc1624e655aa739f 100644 --- a/src/view/profil_edit.php +++ b/src/view/profil_edit.php @@ -41,11 +41,11 @@ <div class="row"> <div class="col-1 text-left"></div> <div class="col-2 text-left"> - Your Name:<br> - Phone:<br> + Your Name<br> + Phone<br> Driver Status </div> - <div class="col-2"> + <div class="col-2 line-height-medium"> <input style="width: 100%" type="text" name="name" value="<?=$user->name?>"><br> <input style="width: 100%" type="text" name="phone" value="<?=$user->phone?>"><br> <input style="width: 20%" type="radio" name="isDriver" value="yes" <?=$user->isDriver? 'checked':''?>>Yes @@ -54,13 +54,14 @@ <div class="col-1 text-left"></div> </div> <br> + <br> <div class="row"> <div class="col-1 text-left"></div> <div class="col-2 text-left"> - <a href="/main/profil?u=<?=$id?>"><button type="button">BACK</button></a> + <a class="btn red" href="/main/profil?u=<?=$id?>">BACK</a> </div> <div class="col-2 text-right"> - <input type="submit" value="SAVE"> + <input class="btn green" type="submit" value="SAVE"> </div> <div class="col-1 text-left"></div> </div>