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 {
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;
}

4
public/js/admin.js vendored
View File

@@ -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;

3
resources/js/admin.js vendored
View File

@@ -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;

113
resources/sass/app.scss vendored
View File

@@ -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;
}

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

@@ -7,8 +7,8 @@
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div class="pure-menu pure-menu-horizontal">
<span class="pure-menu-heading">Admin</span>
<nav class="pure-menu pure-menu-horizontal">
<a class="pure-menu-heading pure-menu-link" id="title-link" href="{{route('admin')}}">Admin</a>
<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="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" href="{{ route('index') }}">Volver</a></li>
</ul>
</div>
</nav>
<div class="container">
@yield('content')

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

@@ -5,13 +5,19 @@
@endsection
@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
<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>
<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>
<input type="submit" class="form-submit" value="Crear"/>
</fieldset>
</form>
@endsection

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

@@ -5,12 +5,18 @@
@endsection
@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
<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>
<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>
<input type="submit" class="form-submit" value="Actualizar"/>
</fieldset>
</form>
@endsection

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

@@ -1,13 +1,9 @@
@extends('admin.base')
@section('content')
<div class="pure-g">
<div class="pure-u-1-5">
<div class="table-heading">
<h1>Now</h1>
</div>
<div class="pure-u-4-5">
<a class="pure-button u-align-right" href="{{ route('admin.now.create') }}">Create</a>
</div>
<a class="pure-button button-black-white" href="{{ route('admin.now.create') }}">Create</a>
</div>
<table class="pure-table">
<thead>
@@ -15,7 +11,6 @@
<th>Id</th>
<th>Fecha</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
@@ -23,13 +18,11 @@
<tr>
<td>{{$now->id}}</td>
<td>{{$now->created_at->format('Y-m-d')}}</td>
<td>
<a class="pure-button" href="{{ route('admin.now.edit', ['now' => $now->id]) }}">Edit</a>
</td>
<td>
<td class="controls">
<a class="pure-button button-black-white" href="{{ route('admin.now.edit', ['now' => $now->id]) }}">Edit</a>
<form action={{ route('admin.now.delete', ['now' => $now->id]) }} method="post">
@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>
</td>
</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">
@csrf
<fieldset>
<h1>Create post</h1>
<a class="pure-button button-black-white" href="{{ route('admin.post.index') }}">Volver</a>
<label for="title">Titulo</label>
<input type="text" id="title" name="title" required/>
<label for="md">Contenido</label>
<textarea id="md" name="md"></textarea>
<div class="control">
<button class="pure-button button-black-white" type="submit">Crear</button>
</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">
@csrf
<fieldset>
<h1>Editar Post</h1>
<a href="{{ route('admin.post.index') }}" class="pure-button button-black-white">Volver</a>
<label for="title">Titulo</label>
<input type="text" id="title" name="title" value="{{ old('title', $post->title) }}" required/>
<label for="md">Contenido</label>
<textarea id="md" name="md">{{ old('md', $post->md) }}</textarea>
<div class="control">
<button type="submit" class="pure-button button-black-white">Actualizar</button>
</div>
</div>
</fieldset>
</form>
@endsection

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

@@ -14,20 +14,19 @@
<th>Titulo</th>
<th>Fecha</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
@foreach($posts as $post)
<tr>
<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 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">
@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>
</td>
</tr>

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

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