skrd/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mas css, la parte de adminn esta casi casi <3

Browse Source
This commit is contained in:
Daniel Cortés
2019-10-14 09:28:23 -03:00
parent 59054f1d55
commit 5216654ad1
12 changed files with 229 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
public/css/app.css vendored
View File

@@ -1483,9 +1483,17 @@ striping:
.pure-table-horizontal tbody > tr:last-child > td { .pure-table-horizontal tbody > tr:last-child > td {
border-bottom-width: 0; border-bottom-width: 0;
} }
/******************************************************************************
=> Color definitions
*******************************************************************************/
/******************************************************************************
=> General
*******************************************************************************/
body { body {
color: #241f1e; color: #241f1e;
background-color: #fffbfa; background-color: #fdfcfc;
overflow-y: scroll; overflow-y: scroll;
} }
@@ -1515,8 +1523,12 @@ p {
line-height: 1.5rem; line-height: 1.5rem;
} }
/******************************************************************************
=> Forms
*******************************************************************************/
.pure-form textarea { .pure-form textarea {
height: 30ch; height: 20ch;
} }
.pure-form input[type=text], .pure-form input[type=text],
@@ -1528,6 +1540,22 @@ p {
margin-top: 1em; 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 { .pure-menu-horizontal {
display: flex; display: flex;
padding-left: 40ch; padding-left: 40ch;
@@ -1545,7 +1573,7 @@ p {
} }
.pure-menu-link { .pure-menu-link {
color: #212121; color: #241f1e;
} }
.pure-menu-link:hover, .pure-menu-link:hover,
@@ -1560,6 +1588,10 @@ p {
padding: 0.5em 0; padding: 0.5em 0;
} }
/******************************************************************************
=> Buttons & Links
*******************************************************************************/
.admin-link { .admin-link {
color: #ee1155; color: #ee1155;
} }
@@ -1571,26 +1603,49 @@ p {
} }
.button-black-white { .button-black-white {
background-color: #ffffff; background-color: white;
color: #212121; color: #241f1e;
border: #212121 solid 1px; border: #241f1e solid 1px;
border-radius: 0;
min-width: 20ch;
} }
.button-black-white:focus,
.button-black-white:hover { .button-black-white:hover {
background-color: #eeeeee; background-color: white;
color: #212121; color: #241f1e;
border: #212121 solid 1px; border: #241f1e solid 1px;
background-image: none; 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 { .table-heading {
margin-bottom: 1em; margin-bottom: 1em;
} }
.pure-table { .pure-table,
.pure-table thead,
.pure-table tbody {
width: 100%; width: 100%;
} }
.pure-table thead {
background-color: white;
border: 1px black solid;
}
.pure-table, .pure-table,
.pure-table td, .pure-table td,
.pure-table th { .pure-table th {
@@ -1602,17 +1657,25 @@ p {
max-width: 30ch; max-width: 30ch;
} }
.pure-table tr {
border-bottom: 1px black solid;
}
.pure-table .controls { .pure-table .controls {
display: inline-flex; width: 16ch;
} }
.pure-table .controls a:first-child { .pure-table .controls > * {
padding-right: 1em; display: inline-block;
} }
.pure-form .control { .pure-table .controls .pure-button.button-black-white {
padding-top: 1em; min-width: auto;
width: 100%; width: 7ch;
text-align: right; padding: 0.5em 0;
}
.pure-table .controls :first-child {
margin-right: 1ch;
} }

4
public/js/admin.js vendored
View File

@@ -94,6 +94,10 @@
/***/ (function(module, exports) { /***/ (function(module, exports) {
switch (window.location.pathname) { switch (window.location.pathname) {
case "/admin":
document.getElementById("title-link").classList.add("pure-menu-highlight");
break;
case "/admin/posts": case "/admin/posts":
document.getElementById("posts-link").classList.add("pure-menu-highlight"); document.getElementById("posts-link").classList.add("pure-menu-highlight");
break; break;

3
resources/js/admin.js vendored
View File

@@ -1,4 +1,7 @@
switch(window.location.pathname){ switch(window.location.pathname){
case "/admin":
document.getElementById("title-link").classList.add("pure-menu-highlight");
break;
case "/admin/posts": case "/admin/posts":
document.getElementById("posts-link").classList.add("pure-menu-highlight"); document.getElementById("posts-link").classList.add("pure-menu-highlight");
break; break;

113
resources/sass/app.scss vendored
View File

@@ -1,8 +1,19 @@
@import "~purecss/build/pure.css"; @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 { body {
color: hsl(10, 10%, 13%); color: $foreground-color;
background-color: hsl(10, 100%, 99%); background-color: $background-color;
overflow-y: scroll; overflow-y: scroll;
} }
@@ -17,11 +28,11 @@ img {
} }
a { a {
color: #0fa0ce; color: $primary-color;
} }
.link { .link {
color: #0fa0ce; color: $primary-color;
border: none; border: none;
background: none; background: none;
text-decoration: underline; text-decoration: underline;
@@ -32,8 +43,11 @@ p {
line-height: 1.5rem; line-height: 1.5rem;
} }
/******************************************************************************
=> Forms
*******************************************************************************/
.pure-form textarea { .pure-form textarea {
height: 30ch; height: 20ch;
} }
.pure-form input[type="text"], .pure-form input[type="text"],
@@ -45,7 +59,21 @@ p {
margin-top: 1em; 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 { .pure-menu-horizontal {
display: flex; display: flex;
padding-left: 40ch; padding-left: 40ch;
@@ -63,12 +91,12 @@ p {
} }
.pure-menu-link { .pure-menu-link {
color: #212121; color: $foreground-color;
} }
.pure-menu-link:hover, .pure-menu-highlight { .pure-menu-link:hover, .pure-menu-highlight {
color: #0fa0ce; color: $primary-color;
border-bottom: 1px #0fa0ce solid; border-bottom: 1px $primary-color solid;
background-color: transparent; background-color: transparent;
} }
@@ -77,37 +105,63 @@ p {
padding: .5em 0; padding: .5em 0;
} }
/******************************************************************************
=> Buttons & Links
*******************************************************************************/
.admin-link { .admin-link {
color: #ee1155; color: $admin-color;
} }
.admin-link:hover{ .admin-link:hover{
color: #ee1155; color: $admin-color;
border-bottom: 1px #ee1155 solid; border-bottom: 1px $admin-color solid;
background-color: transparent; background-color: transparent;
} }
.button-black-white { .button-black-white {
background-color: #ffffff; background-color: lighten($background-color, 10%);
color: #212121; color: $foreground-color;
border: #212121 solid 1px; border: $foreground-color solid 1px;
border-radius: 0;
min-width: 20ch;
} }
.button-black-white:focus,
.button-black-white:hover { .button-black-white:hover {
background-color: #eeeeee; background-color: lighten($background-color, 10%);
color: #212121; color: $foreground-color;
border: #212121 solid 1px; border: $foreground-color solid 1px;
background-image: none; 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 { .table-heading {
margin-bottom: 1em; margin-bottom: 1em;
} }
.pure-table { .pure-table,
.pure-table thead,
.pure-table tbody{
width: 100%; width: 100%;
} }
.pure-table thead {
background-color: lighten($background-color, 10%);
border: 1px black solid;
}
.pure-table, .pure-table,
.pure-table td, .pure-table td,
.pure-table th { .pure-table th {
@@ -119,16 +173,25 @@ p {
max-width: 30ch; max-width: 30ch;
} }
.pure-table tr {
border-bottom: 1px black solid;
}
.pure-table .controls { .pure-table .controls {
display: inline-flex; width: 16ch;
} }
.pure-table .controls a:first-child{ .pure-table .controls > *{
padding-right: 1em; display: inline-block;
} }
.pure-form .control { .pure-table .controls .pure-button.button-black-white{
padding-top: 1em; min-width: auto;
width:100%; width: 7ch;
text-align: right; padding: .5em 0;
} }
.pure-table .controls :first-child {
margin-right: 1ch;
}

6
resources/views/admin/base.blade.php
View File

@@ -7,8 +7,8 @@
<link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head> </head>
<body> <body>
<div class="pure-menu pure-menu-horizontal"> <nav class="pure-menu pure-menu-horizontal">
<span class="pure-menu-heading">Admin</span> <a class="pure-menu-heading pure-menu-link" id="title-link" href="{{route('admin')}}">Admin</a>
<ul class="pure-menu-list"> <ul class="pure-menu-list">
<li class="pure-menu-item"><a class="pure-menu-link" id="posts-link" href="{{ route('admin.post.index') }}">Posts</a></li> <li class="pure-menu-item"><a class="pure-menu-link" id="posts-link" href="{{ route('admin.post.index') }}">Posts</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" id="now-link"href="{{ route('admin.now.index') }}">Now</a></li> <li class="pure-menu-item"><a class="pure-menu-link" id="now-link"href="{{ route('admin.now.index') }}">Now</a></li>
@@ -16,7 +16,7 @@
<li class="pure-menu-item"><a class="pure-menu-link" id="projects-link"href="{{ route('admin.project.index') }}">Projects</a></li> <li class="pure-menu-item"><a class="pure-menu-link" id="projects-link"href="{{ route('admin.project.index') }}">Projects</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="{{ route('index') }}">Volver</a></li> <li class="pure-menu-item"><a class="pure-menu-link" href="{{ route('index') }}">Volver</a></li>
</ul> </ul>
</div> </nav>
<div class="container"> <div class="container">
@yield('content') @yield('content')

14
resources/views/admin/now/create.blade.php
View File

@@ -5,13 +5,19 @@
@endsection @endsection
@section('content') @section('content')
<form action="{{ route('admin.now.save') }}" method="post"> <form class="pure-form pure-form-stacked" action="{{ route('admin.now.save') }}" method="post">
@csrf @csrf
<div> <fieldset>
<h1>Create Now</h1>
<a class="pure-button button-black-white" href="{{ route('admin.now.index') }}">Volver</a>
<label for="md">Contenido</label> <label for="md">Contenido</label>
<textarea id="md" class="form-input" name="md"></textarea> <textarea id="md" name="md"></textarea>
<div class="control">
<button type="submit" class="pure-button button-black-white">Crear</button>
</div> </div>
<input type="submit" class="form-submit" value="Crear"/> </fieldset>
</form> </form>
@endsection @endsection

14
resources/views/admin/now/edit.blade.php
View File

@@ -5,12 +5,18 @@
@endsection @endsection
@section('content') @section('content')
<form action="{{ route('admin.now.update', ['now' => $now->id]) }}" method="post"> <form class="pure-form pure-form-stacked" action="{{ route('admin.now.update', ['now' => $now->id]) }}" method="post">
@csrf @csrf
<div> <fieldset>
<h1>Editar Now</h1>
<a href="{{ route('admin.now.index') }}" class="pure-button button-black-white">Volver</a>
<label for="md">Contenido</label> <label for="md">Contenido</label>
<textarea class="form-input" id="md" name="md">{{ old('md', $now->md) }}</textarea> <textarea id="md" name="md">{{ old('md', $now->md) }}</textarea>
<div class="control">
<button type="submit" class="pure-button button-black-white">Actualizar</button>
</div> </div>
<input type="submit" class="form-submit" value="Actualizar"/> </fieldset>
</form> </form>
@endsection @endsection

17
resources/views/admin/now/index.blade.php
View File

@@ -1,13 +1,9 @@
@extends('admin.base') @extends('admin.base')
@section('content') @section('content')
<div class="pure-g"> <div class="table-heading">
<div class="pure-u-1-5">
<h1>Now</h1> <h1>Now</h1>
</div> <a class="pure-button button-black-white" href="{{ route('admin.now.create') }}">Create</a>
<div class="pure-u-4-5">
<a class="pure-button u-align-right" href="{{ route('admin.now.create') }}">Create</a>
</div>
</div> </div>
<table class="pure-table"> <table class="pure-table">
<thead> <thead>
@@ -15,7 +11,6 @@
<th>Id</th> <th>Id</th>
<th>Fecha</th> <th>Fecha</th>
<th></th> <th></th>
<th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -23,13 +18,11 @@
<tr> <tr>
<td>{{$now->id}}</td> <td>{{$now->id}}</td>
<td>{{$now->created_at->format('Y-m-d')}}</td> <td>{{$now->created_at->format('Y-m-d')}}</td>
<td> <td class="controls">
<a class="pure-button" href="{{ route('admin.now.edit', ['now' => $now->id]) }}">Edit</a> <a class="pure-button button-black-white" href="{{ route('admin.now.edit', ['now' => $now->id]) }}">Edit</a>
</td>
<td>
<form action={{ route('admin.now.delete', ['now' => $now->id]) }} method="post"> <form action={{ route('admin.now.delete', ['now' => $now->id]) }} method="post">
@csrf @csrf
<button type="submit" class="pure-button">Delete</button> <button type="submit" class="pure-button button-black-white" onclick="return confirm('Estas seguro?')">Delete</button>
</form> </form>
</td> </td>
</tr> </tr>

4
resources/views/admin/posts/create.blade.php
View File

@@ -8,11 +8,15 @@
<form class="pure-form pure-form-stacked" action="{{ route('admin.post.save') }}" method="post"> <form class="pure-form pure-form-stacked" action="{{ route('admin.post.save') }}" method="post">
@csrf @csrf
<fieldset> <fieldset>
<h1>Create post</h1>
<a class="pure-button button-black-white" href="{{ route('admin.post.index') }}">Volver</a>
<label for="title">Titulo</label> <label for="title">Titulo</label>
<input type="text" id="title" name="title" required/> <input type="text" id="title" name="title" required/>
<label for="md">Contenido</label> <label for="md">Contenido</label>
<textarea id="md" name="md"></textarea> <textarea id="md" name="md"></textarea>
<div class="control"> <div class="control">
<button class="pure-button button-black-white" type="submit">Crear</button> <button class="pure-button button-black-white" type="submit">Crear</button>
</div> </div>

6
resources/views/admin/posts/edit.blade.php
View File

@@ -8,14 +8,18 @@
<form class="pure-form pure-form-stacked" action="{{ route('admin.post.update', ['post' => $post->id]) }}" method="post"> <form class="pure-form pure-form-stacked" action="{{ route('admin.post.update', ['post' => $post->id]) }}" method="post">
@csrf @csrf
<fieldset> <fieldset>
<h1>Editar Post</h1>
<a href="{{ route('admin.post.index') }}" class="pure-button button-black-white">Volver</a>
<label for="title">Titulo</label> <label for="title">Titulo</label>
<input type="text" id="title" name="title" value="{{ old('title', $post->title) }}" required/> <input type="text" id="title" name="title" value="{{ old('title', $post->title) }}" required/>
<label for="md">Contenido</label> <label for="md">Contenido</label>
<textarea id="md" name="md">{{ old('md', $post->md) }}</textarea> <textarea id="md" name="md">{{ old('md', $post->md) }}</textarea>
<div class="control"> <div class="control">
<button type="submit" class="pure-button button-black-white">Actualizar</button> <button type="submit" class="pure-button button-black-white">Actualizar</button>
</div> </div>
</div>
</fieldset> </fieldset>
</form> </form>
@endsection @endsection

7
resources/views/admin/posts/index.blade.php
View File

@@ -14,20 +14,19 @@
<th>Titulo</th> <th>Titulo</th>
<th>Fecha</th> <th>Fecha</th>
<th></th> <th></th>
<th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@foreach($posts as $post) @foreach($posts as $post)
<tr> <tr>
<td>{{$post->id}}</td> <td>{{$post->id}}</td>
<td>{{$post->title}}</td> <td>{{ Str::limit($post->title, 30, "...") }}</td>
<td>{{$post->created_at->format('Y-m-d')}}</td> <td>{{$post->created_at->format('Y-m-d')}}</td>
<td class="controls"> <td class="controls">
<a href="{{ route('admin.post.edit', ['post' => $post->id]) }}">Edit</a> <a href="{{ route('admin.post.edit', ['post' => $post->id]) }}" class="pure-button button-black-white">Edit</a>
<form action={{ route('admin.post.delete', ['post' => $post->id]) }} method="post"> <form action={{ route('admin.post.delete', ['post' => $post->id]) }} method="post">
@csrf @csrf
<button type="submit" class="link" onclick="return confirm('Estas seguro?')">Delete</button> <button type="submit" class="pure-button button-black-white" onclick="return confirm('Estas seguro?')">Delete</button>
</form> </form>
</td> </td>
</tr> </tr>

2
resources/views/base.blade.php
View File

@@ -36,6 +36,6 @@
@yield('content') @yield('content')
</div> </div>
<script src="{{ asset('js/app.js') }}"></script> <script src=""></script>
</body> </body>
</html> </html>