From 5216654ad1e6caa748c77017b51aea5cea4f5f06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Cort=C3=A9s?= Date: Mon, 14 Oct 2019 09:28:23 -0300 Subject: [PATCH] mas css, la parte de adminn esta casi casi <3 --- public/css/app.css | 97 +++++++++++++--- public/js/admin.js | 4 + resources/js/admin.js | 3 + resources/sass/app.scss | 113 +++++++++++++++---- resources/views/admin/base.blade.php | 26 ++--- resources/views/admin/now/create.blade.php | 16 ++- resources/views/admin/now/edit.blade.php | 16 ++- resources/views/admin/now/index.blade.php | 19 +--- resources/views/admin/posts/create.blade.php | 4 + resources/views/admin/posts/edit.blade.php | 6 +- resources/views/admin/posts/index.blade.php | 7 +- resources/views/base.blade.php | 2 +- 12 files changed, 229 insertions(+), 84 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index 8e790a3..f680315 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -1483,9 +1483,17 @@ striping: .pure-table-horizontal tbody > tr:last-child > td { border-bottom-width: 0; } +/****************************************************************************** + => Color definitions +*******************************************************************************/ + +/****************************************************************************** + => General +*******************************************************************************/ + body { color: #241f1e; - background-color: #fffbfa; + background-color: #fdfcfc; overflow-y: scroll; } @@ -1515,8 +1523,12 @@ p { line-height: 1.5rem; } +/****************************************************************************** + => Forms +*******************************************************************************/ + .pure-form textarea { - height: 30ch; + height: 20ch; } .pure-form input[type=text], @@ -1528,6 +1540,22 @@ p { margin-top: 1em; } +.pure-form .control { + padding-top: 1em; + width: 100%; + text-align: right; +} + +.pure-form { + border: 1px #241f1e solid; + background-color: #f3eeed; + padding: 1em; +} + +/****************************************************************************** + => Menu +*******************************************************************************/ + .pure-menu-horizontal { display: flex; padding-left: 40ch; @@ -1545,7 +1573,7 @@ p { } .pure-menu-link { - color: #212121; + color: #241f1e; } .pure-menu-link:hover, @@ -1560,6 +1588,10 @@ p { padding: 0.5em 0; } +/****************************************************************************** + => Buttons & Links +*******************************************************************************/ + .admin-link { color: #ee1155; } @@ -1571,26 +1603,49 @@ p { } .button-black-white { - background-color: #ffffff; - color: #212121; - border: #212121 solid 1px; + background-color: white; + color: #241f1e; + border: #241f1e solid 1px; + border-radius: 0; + min-width: 20ch; } +.button-black-white:focus, .button-black-white:hover { - background-color: #eeeeee; - color: #212121; - border: #212121 solid 1px; + background-color: white; + color: #241f1e; + border: #241f1e solid 1px; background-image: none; + box-shadow: inset 1px 1px 4px -2px #241f1e; } +.button-black-white:active { + background-color: white; + color: #241f1e; + border: #241f1e solid 1px; + background-image: none; + box-shadow: inset 1px 1px 2px #241f1e; +} + +/****************************************************************************** + => Tables +*******************************************************************************/ + .table-heading { margin-bottom: 1em; } -.pure-table { +.pure-table, +.pure-table thead, +.pure-table tbody { width: 100%; } +.pure-table thead { + background-color: white; + border: 1px black solid; +} + .pure-table, .pure-table td, .pure-table th { @@ -1602,17 +1657,25 @@ p { max-width: 30ch; } +.pure-table tr { + border-bottom: 1px black solid; +} + .pure-table .controls { - display: inline-flex; + width: 16ch; } -.pure-table .controls a:first-child { - padding-right: 1em; +.pure-table .controls > * { + display: inline-block; } -.pure-form .control { - padding-top: 1em; - width: 100%; - text-align: right; +.pure-table .controls .pure-button.button-black-white { + min-width: auto; + width: 7ch; + padding: 0.5em 0; +} + +.pure-table .controls :first-child { + margin-right: 1ch; } diff --git a/public/js/admin.js b/public/js/admin.js index 841bd19..ae72ad7 100644 --- a/public/js/admin.js +++ b/public/js/admin.js @@ -94,6 +94,10 @@ /***/ (function(module, exports) { switch (window.location.pathname) { + case "/admin": + document.getElementById("title-link").classList.add("pure-menu-highlight"); + break; + case "/admin/posts": document.getElementById("posts-link").classList.add("pure-menu-highlight"); break; diff --git a/resources/js/admin.js b/resources/js/admin.js index 19a273d..3095923 100644 --- a/resources/js/admin.js +++ b/resources/js/admin.js @@ -1,4 +1,7 @@ switch(window.location.pathname){ + case "/admin": + document.getElementById("title-link").classList.add("pure-menu-highlight"); + break; case "/admin/posts": document.getElementById("posts-link").classList.add("pure-menu-highlight"); break; diff --git a/resources/sass/app.scss b/resources/sass/app.scss index 0ca26c7..5202b6d 100644 --- a/resources/sass/app.scss +++ b/resources/sass/app.scss @@ -1,8 +1,19 @@ @import "~purecss/build/pure.css"; +/****************************************************************************** + => Color definitions +*******************************************************************************/ +$background-color: hsl(10, 20%, 99%); +$foreground-color: hsl(10, 10%, 13%); +$primary-color : #0fa0ce; +$admin-color : #ee1155; + +/****************************************************************************** + => General +*******************************************************************************/ body { - color: hsl(10, 10%, 13%); - background-color: hsl(10, 100%, 99%); + color: $foreground-color; + background-color: $background-color; overflow-y: scroll; } @@ -17,11 +28,11 @@ img { } a { - color: #0fa0ce; + color: $primary-color; } .link { - color: #0fa0ce; + color: $primary-color; border: none; background: none; text-decoration: underline; @@ -32,8 +43,11 @@ p { line-height: 1.5rem; } +/****************************************************************************** + => Forms +*******************************************************************************/ .pure-form textarea { - height: 30ch; + height: 20ch; } .pure-form input[type="text"], @@ -45,7 +59,21 @@ p { margin-top: 1em; } +.pure-form .control { + padding-top: 1em; + width:100%; + text-align: right; +} +.pure-form { + border: 1px $foreground-color solid; + background-color: darken($background-color, 5%); + padding: 1em; +} + +/****************************************************************************** + => Menu +*******************************************************************************/ .pure-menu-horizontal { display: flex; padding-left: 40ch; @@ -63,12 +91,12 @@ p { } .pure-menu-link { - color: #212121; + color: $foreground-color; } .pure-menu-link:hover, .pure-menu-highlight { - color: #0fa0ce; - border-bottom: 1px #0fa0ce solid; + color: $primary-color; + border-bottom: 1px $primary-color solid; background-color: transparent; } @@ -77,37 +105,63 @@ p { padding: .5em 0; } +/****************************************************************************** + => Buttons & Links +*******************************************************************************/ + .admin-link { - color: #ee1155; + color: $admin-color; } .admin-link:hover{ - color: #ee1155; - border-bottom: 1px #ee1155 solid; + color: $admin-color; + border-bottom: 1px $admin-color solid; background-color: transparent; } .button-black-white { - background-color: #ffffff; - color: #212121; - border: #212121 solid 1px; + background-color: lighten($background-color, 10%); + color: $foreground-color; + border: $foreground-color solid 1px; + border-radius: 0; + min-width: 20ch; } +.button-black-white:focus, .button-black-white:hover { - background-color: #eeeeee; - color: #212121; - border: #212121 solid 1px; + background-color: lighten($background-color, 10%); + color: $foreground-color; + border: $foreground-color solid 1px; background-image: none; + box-shadow: inset 1px 1px 4px -2px $foreground-color; +} +.button-black-white:active{ + background-color: lighten($background-color, 10%); + color: $foreground-color; + border: $foreground-color solid 1px; + background-image: none; + box-shadow: inset 1px 1px 2px $foreground-color; } +/****************************************************************************** + => Tables +*******************************************************************************/ .table-heading { margin-bottom: 1em; } -.pure-table { +.pure-table, +.pure-table thead, +.pure-table tbody{ width: 100%; } +.pure-table thead { + background-color: lighten($background-color, 10%); + border: 1px black solid; +} + + .pure-table, .pure-table td, .pure-table th { @@ -119,16 +173,25 @@ p { max-width: 30ch; } +.pure-table tr { + border-bottom: 1px black solid; +} + .pure-table .controls { - display: inline-flex; + width: 16ch; } -.pure-table .controls a:first-child{ - padding-right: 1em; +.pure-table .controls > *{ + display: inline-block; } -.pure-form .control { - padding-top: 1em; - width:100%; - text-align: right; +.pure-table .controls .pure-button.button-black-white{ + min-width: auto; + width: 7ch; + padding: .5em 0; } + +.pure-table .controls :first-child { + margin-right: 1ch; +} + diff --git a/resources/views/admin/base.blade.php b/resources/views/admin/base.blade.php index fd1323c..611b52f 100644 --- a/resources/views/admin/base.blade.php +++ b/resources/views/admin/base.blade.php @@ -7,20 +7,20 @@ -
- Admin - -
+ -
- @yield('content') -
+
+ @yield('content') +
diff --git a/resources/views/admin/now/create.blade.php b/resources/views/admin/now/create.blade.php index 3634646..4eb9a11 100644 --- a/resources/views/admin/now/create.blade.php +++ b/resources/views/admin/now/create.blade.php @@ -5,13 +5,19 @@ @endsection @section('content') -
+ @csrf -
+
+

Create Now

+ Volver + - -
- + + +
+ +
+
@endsection diff --git a/resources/views/admin/now/edit.blade.php b/resources/views/admin/now/edit.blade.php index 41db73e..6695b90 100644 --- a/resources/views/admin/now/edit.blade.php +++ b/resources/views/admin/now/edit.blade.php @@ -5,12 +5,18 @@ @endsection @section('content') -
+ @csrf -
+
+

Editar Now

+ Volver + - -
- + + +
+ +
+
@endsection diff --git a/resources/views/admin/now/index.blade.php b/resources/views/admin/now/index.blade.php index b7b4a16..2cb7035 100644 --- a/resources/views/admin/now/index.blade.php +++ b/resources/views/admin/now/index.blade.php @@ -1,13 +1,9 @@ @extends('admin.base') @section('content') -
-
-

Now

-
-
- Create -
+
+

Now

+ Create
@@ -15,7 +11,6 @@ - @@ -23,13 +18,11 @@ - - diff --git a/resources/views/admin/posts/create.blade.php b/resources/views/admin/posts/create.blade.php index d26ef79..3ff5822 100644 --- a/resources/views/admin/posts/create.blade.php +++ b/resources/views/admin/posts/create.blade.php @@ -8,11 +8,15 @@ @csrf
+

Create post

+ Volver + +
diff --git a/resources/views/admin/posts/edit.blade.php b/resources/views/admin/posts/edit.blade.php index 6a082fb..36b9dcb 100644 --- a/resources/views/admin/posts/edit.blade.php +++ b/resources/views/admin/posts/edit.blade.php @@ -8,14 +8,18 @@ @csrf
+

Editar Post

+ Volver + + +
-
@endsection diff --git a/resources/views/admin/posts/index.blade.php b/resources/views/admin/posts/index.blade.php index 8923015..6098d78 100644 --- a/resources/views/admin/posts/index.blade.php +++ b/resources/views/admin/posts/index.blade.php @@ -14,20 +14,19 @@
- @foreach($posts as $post) - + diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php index bf2fda7..9f1c9c9 100644 --- a/resources/views/base.blade.php +++ b/resources/views/base.blade.php @@ -36,6 +36,6 @@ @yield('content') - +
Id Fecha
{{$now->id}} {{$now->created_at->format('Y-m-d')}} - Edit - + + Edit
$now->id]) }} method="post"> @csrf - +
Titulo Fecha
{{$post->id}}{{$post->title}}{{ Str::limit($post->title, 30, "...") }} {{$post->created_at->format('Y-m-d')}} - Edit + Edit
$post->id]) }} method="post"> @csrf - +