uff creo que ya esta

This commit is contained in:
Daniel Cortés
2019-10-15 16:57:31 -03:00
parent a7929c0097
commit 9f77ef6dd4
13 changed files with 372 additions and 258 deletions

144
public/css/app.css vendored
View File

@@ -1503,6 +1503,16 @@ body {
margin: auto;
}
.container.wide {
max-width: 100ch;
}
@media (min-width: 768px) {
.container {
margin-top: 6em;
}
}
img {
max-width: 100%;
cursor: pointer;
@@ -1512,14 +1522,6 @@ a {
color: #0fa0ce;
}
.link {
color: #0fa0ce;
border: none;
background: none;
text-decoration: underline;
padding: 0;
}
p {
line-height: 1.5rem;
}
@@ -1528,6 +1530,7 @@ article {
box-shadow: 3px 3px 10px 0px #aaa;
padding: 2ch 10ch;
margin-bottom: 2em;
background-color: white;
}
/******************************************************************************
@@ -1536,13 +1539,12 @@ article {
.pure-form textarea {
height: 25ch;
min-width: calc(80ch - 2em);
max-width: calc(80ch - 2em);
resize: vertical;
}
.pure-form input[type=text],
.pure-form textarea {
width: calc(80ch - 2em);
width: 100%;
}
.pure-form input[type=text],
@@ -1565,51 +1567,107 @@ article {
text-align: right;
}
.pure-form {
box-shadow: 0px 0px 20px -15px #241f1e;
padding: 1em;
}
/******************************************************************************
=> Menu
*******************************************************************************/
.pure-menu-horizontal {
display: flex;
padding-left: 40ch;
padding-right: 40ch;
padding-bottom: 1em;
padding-top: 1em;
margin-bottom: 1em;
box-shadow: 0 -5px 10px black;
.menu {
padding-top: 2ch;
padding-bottom: 2ch;
box-shadow: 0px 3px 5px 0px #ccc;
background-color: #fdfcfc;
}
.pure-menu-horizontal .pure-menu-list {
.menu-list {
display: flex;
justify-content: right;
flex-direction: column;
max-width: 80ch;
margin: auto;
padding-left: 10ch;
list-style: none;
}
.menu-item {
margin: 0;
padding: 0.5ch 0;
height: 100%;
}
.menu-link,
.menu-heading {
display: inline-block;
text-decoration: none;
color: #241f1e;
width: 100%;
}
.pure-menu-link {
color: #241f1e;
}
.pure-menu-link:hover,
.pure-menu-highlight {
.menu-link:hover,
.menu-heading:hover,
.menu-highlight {
color: #0fa0ce;
border-bottom: 1px #0fa0ce solid;
background-color: transparent;
}
.pure-menu-heading {
.menu-heading {
text-transform: uppercase;
font-weight: bold;
margin-bottom: 1ch;
letter-spacing: 0.5ch;
padding: 0.5em 0;
}
@media (min-width: 768px) {
.menu {
width: 100%;
position: fixed;
height: 1.75em;
top: 0;
}
.menu-list {
flex-direction: row;
align-items: center;
padding-left: 0;
}
.menu-link,
.menu-heading {
width: auto;
}
.menu-item {
margin-left: 1em;
}
.menu-heading {
flex-grow: 1;
margin-bottom: 0;
}
}
.separator {
width: 100%;
height: 2px;
margin-bottom: 1em;
box-shadow: 0px 10px 10px #ccc;
}
/******************************************************************************
=> Buttons & Links
*******************************************************************************/
.pure-button {
letter-spacing: 0.2em;
min-width: 20ch;
border-radius: 0;
background-image: none;
border: none;
}
.pure-button:focus,
.pure-button:hover,
.pure-button:active {
background-image: none;
}
.special-link {
color: #ee1155;
}
@@ -1624,24 +1682,18 @@ article {
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: 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;
}
@@ -1649,8 +1701,8 @@ article {
=> Tables
*******************************************************************************/
.table-heading {
margin-bottom: 1em;
.pure-table {
margin-top: 1em;
}
.pure-table,
@@ -1680,7 +1732,7 @@ article {
}
.pure-table .controls {
width: 16ch;
width: 22ch;
}
.pure-table .controls > * {
@@ -1689,7 +1741,7 @@ article {
.pure-table .controls .pure-button.button-black-white {
min-width: auto;
width: 7ch;
width: 10ch;
padding: 0.5em 0;
}

2
public/js/app.js vendored
View File

@@ -94,7 +94,7 @@
/***/ (function(module, exports) {
// Highlight links if in his page
if (window.location.pathname == "/blog" || window.location.pathname == "/blog.archive") document.getElementById("blog-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/now") document.getElementById("now-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/projects") document.getElementById("proyectos-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/setup") document.getElementById("setup-link").classList.add("pure-menu-highlight"); // Makes all images clickeable
if (window.location.pathname == "/blog" || window.location.pathname == "/blog.archive") document.getElementById("blog-link").classList.add("menu-highlight");else if (window.location.pathname == "/now") document.getElementById("now-link").classList.add("menu-highlight");else if (window.location.pathname == "/projects") document.getElementById("projects-link").classList.add("menu-highlight");else if (window.location.pathname == "/setups") document.getElementById("setup-link").classList.add("menu-highlight"); // Makes all images clickeable
var images = document.getElementsByTagName("img");

10
resources/js/app.js vendored
View File

@@ -1,12 +1,12 @@
// Highlight links if in his page
if(window.location.pathname == "/blog" || window.location.pathname == "/blog.archive")
document.getElementById("blog-link").classList.add("pure-menu-highlight");
document.getElementById("blog-link").classList.add("menu-highlight");
else if(window.location.pathname == "/now")
document.getElementById("now-link").classList.add("pure-menu-highlight");
document.getElementById("now-link").classList.add("menu-highlight");
else if(window.location.pathname == "/projects")
document.getElementById("proyectos-link").classList.add("pure-menu-highlight");
else if(window.location.pathname == "/setup")
document.getElementById("setup-link").classList.add("pure-menu-highlight");
document.getElementById("projects-link").classList.add("menu-highlight");
else if(window.location.pathname == "/setups")
document.getElementById("setup-link").classList.add("menu-highlight");
// Makes all images clickeable
var images = document.getElementsByTagName("img");

View File

@@ -23,6 +23,16 @@ body {
margin: auto;
}
.container.wide {
max-width: 100ch;
}
@media (min-width: 768px){
.container {
margin-top: 6em;
}
}
img {
max-width: 100%;
cursor: pointer;
@@ -32,14 +42,6 @@ a {
color: $primary-color;
}
.link {
color: $primary-color;
border: none;
background: none;
text-decoration: underline;
padding: 0;
}
p {
line-height: 1.5rem;
}
@@ -48,6 +50,7 @@ article {
box-shadow: 3px 3px 10px 0px #aaa;
padding: 2ch 10ch;
margin-bottom: 2em;
background-color: lighten($background-color, 10%);
}
/******************************************************************************
@@ -55,13 +58,12 @@ article {
*******************************************************************************/
.pure-form textarea {
height: 25ch;
min-width: calc(80ch - 2em);
max-width: calc(80ch - 2em);
resize: vertical;
}
.pure-form input[type="text"],
.pure-form textarea {
width: calc(80ch - 2em);
width: 100%;
}
.pure-form input[type="text"],
@@ -84,51 +86,106 @@ article {
text-align: right;
}
.pure-form {
box-shadow: 0px 0px 20px -15px $foreground-color;
//border: 1px $foreground-color solid;
//background-color: darken($background-color, 5%);
padding: 1em;
}
/******************************************************************************
=> Menu
*******************************************************************************/
.pure-menu-horizontal {
display: flex;
padding-left: 40ch;
padding-right: 40ch;
padding-bottom: 1em;
padding-top: 1em;
margin-bottom: 1em;
box-shadow: 0 -5px 10px black;
.menu {
padding-top: 2ch;
padding-bottom: 2ch;
box-shadow: 0px 3px 5px 0px #ccc;
background-color: $background-color;
}
.pure-menu-horizontal .pure-menu-list {
.menu-list {
display: flex;
justify-content: right;
flex-direction: column;
max-width: 80ch;
margin: auto;
padding-left: 10ch;
list-style: none;
}
.menu-item {
margin: 0;
padding: .5ch 0;
height: 100%;
}
.menu-link,
.menu-heading {
display: inline-block;
text-decoration: none;
color: $foreground-color;
width: 100%;
}
.pure-menu-link {
color: $foreground-color;
}
.pure-menu-link:hover, .pure-menu-highlight {
.menu-link:hover,
.menu-heading:hover,
.menu-highlight {
color: $primary-color;
border-bottom: 1px $primary-color solid;
background-color: transparent;
}
.pure-menu-heading {
.menu-heading {
text-transform: uppercase;
font-weight: bold;
margin-bottom: 1ch;
letter-spacing: .5ch;
padding: .5em 0;
}
@media (min-width: 768px){
.menu {
width: 100%;
position: fixed;
height: 1.75em;
top: 0;
}
.menu-list {
flex-direction: row;
align-items: center;
padding-left: 0;
}
.menu-link, .menu-heading {
width: auto;
}
.menu-item{
margin-left: 1em;
}
.menu-heading {
flex-grow: 1;
margin-bottom: 0;
}
}
.separator {
width:100%;
height: 2px;
margin-bottom: 1em;
box-shadow: 0px 10px 10px #ccc;
}
/******************************************************************************
=> Buttons & Links
*******************************************************************************/
.pure-button {
letter-spacing: .2em;
min-width: 20ch;
border-radius: 0;
background-image: none;
border: none;
}
.pure-button:focus,
.pure-button:hover,
.pure-button:active{
background-image: none;
}
.special-link {
color: $admin-color;
}
@@ -143,31 +200,25 @@ article {
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: 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 {
margin-top: 1em;
}
.pure-table,
@@ -198,7 +249,7 @@ article {
}
.pure-table .controls {
width: 16ch;
width: 22ch;
}
.pure-table .controls > *{
@@ -207,7 +258,7 @@ article {
.pure-table .controls .pure-button.button-black-white{
min-width: auto;
width: 7ch;
width: 10ch;
padding: .5em 0;
}

View File

@@ -7,18 +7,28 @@
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<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>
<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="setup-link" href="{{ route('admin.setup.index') }}">Setups</a></li>
<li class="pure-menu-item"><a class="pure-menu-link special-link" href="{{ route('index') }}">Volver</a></li>
<nav class="menu">
<ul class="menu-list">
<a class="menu-heading" id="title-link" href="{{route('admin')}}">Admin</a>
<li class="menu-item">
<a class="menu-link" id="posts-link" href="{{ route('admin.post.index') }}">Posts</a>
</li>
<li class="menu-item">
<a class="menu-link" id="now-link" href="{{ route('admin.now.index') }}">Now</a>
</li>
<li class="menu-item">
<a class="menu-link" id="projects-link"href="{{ route('admin.project.index') }}">Projects</a>
</li>
<li class="menu-item">
<a class="menu-link" id="setup-link" href="{{ route('admin.setup.index') }}">Setups</a>
</li>
<li class="menu-item">
<a class="menu-link special-link" href="{{ route('index') }}">Volver</a>
</li>
</ul>
</nav>
<div class="container">
<div class="container wide">
@yield('content')
</div>

View File

@@ -1,10 +1,10 @@
@extends('admin.base')
@section('content')
<div class="table-heading">
<article>
<h1>Now</h1>
<a class="pure-button button-black-white" href="{{ route('admin.now.create') }}">Create Now</a>
</div>
<table class="pure-table">
<thead>
<tr>
@@ -29,6 +29,5 @@
@endforeach
</tbody>
</table>
</article>
@endsection

View File

@@ -5,6 +5,7 @@
@endsection
@section('content')
<article>
<form class="pure-form pure-form-stacked" action="{{ route('admin.post.save') }}" method="post">
@csrf
<fieldset>
@@ -22,4 +23,5 @@
</div>
</fieldset>
</form>
</article>
@endsection

View File

@@ -5,6 +5,7 @@
@endsection
@section('content')
<article>
<form class="pure-form pure-form-stacked" action="{{ route('admin.post.update', ['post' => $post->id]) }}" method="post">
@csrf
<fieldset>
@@ -22,4 +23,5 @@
</div>
</fieldset>
</form>
</article>
@endsection

View File

@@ -1,11 +1,9 @@
@extends('admin.base')
@section('content')
<div class="table-heading">
<article>
<h1>Posts</h1>
<a class="pure-button button-black-white" href="{{ route('admin.post.create') }}">Create Post</a>
</div>
<table class="pure-table">
<thead>
@@ -33,4 +31,5 @@
@endforeach
</tbody>
</table>
</article>
@endsection

View File

@@ -5,10 +5,9 @@
@endsection
@section('content')
<div class="table-heading">
<article>
<h1>Projects</h1>
<a class="pure-button button-black-white" href="{{ route('admin.project.create') }}">Add Project</a>
</div>
<table class="pure-table">
<thead>
@@ -36,6 +35,5 @@
@endforeach
</tbody>
</table>
</article>
@endsection

View File

@@ -1,11 +1,9 @@
@extends('admin.base')
@section('content')
<div class="table-heading">
<article>
<h1>Setups</h1>
<a class="pure-button button-black-white" href="{{ route('admin.setup.create') }}">Add Setup</a>
</div>
<table class="pure-table">
<thead>
@@ -33,4 +31,5 @@
@endforeach
</tbody>
</table>
</article>
@endsection

View File

@@ -9,29 +9,32 @@
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<nav class="pure-menu pure-menu-horizontal">
<a class="pure-menu-heading pure-menu-link" id="title-link" href="{{route('index')}}">Daniel Cortes</a>
<ul class="pure-menu-list">
<li class="pure-menu-item">
<a class="pure-menu-link" id="blog-link" href="{{route('blog.index')}}">Blog</a>
<nav class="menu">
<ul class="menu-list">
<a class="menu-heading" href="{{route('index')}}">Daniel Cortes</a>
<li class="menu-item">
<a class="menu-link" id="blog-link" href="{{route('blog.index')}}">Blog</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" id="now-link" href="{{route('now.index')}}">Now</a>
<li class="menu-item">
<a class="menu-link" id="now-link" href="{{route('now.index')}}">Now</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" id="proyectos-link" href="{{route('project.index')}}">Projects</a>
<li class="menu-item">
<a class="menu-link" id="projects-link" href="{{route('project.index')}}">Projects</a>
</li>
<li class="pure-menu-item">
<a class="pure-menu-link" id="setup-link" href="{{route('setups.index')}}">Setups</a>
<li class="menu-item">
<a class="menu-link" id="setup-link" href="{{route('setups.index')}}">Setups</a>
</li>
@auth
<li class="pure-menu-item">
<a class="pure-menu-link special-link" href="{{route('admin')}}">Admin</a>
<li class="menu-item">
<a class="menu-link special-link" href="{{route('admin')}}">Admin</a>
</li>
@endauth
</ul>
</nav>
<div class="separator"></div>
<div class="container">
@yield('content')
</div>

View File

@@ -11,6 +11,5 @@
</header>
{!! $parse->text($post->md) !!}
</article>
<hr/>
<span>Para ver mas posts , ve al <a href="{{ route('blog.archive') }}">archivo</a></span>
@endsection