Ajoute la vue calendrier

Pour #3
This commit is contained in:
2020-03-18 16:57:32 +01:00
parent 2ad19f4793
commit 9a6d257de0
9 changed files with 393 additions and 1 deletions

View File

@@ -19,3 +19,6 @@
// Surcharge
@import 'general';
// Calendar
@import "calendar";

118
resources/sass/calendar.scss vendored Normal file
View File

@@ -0,0 +1,118 @@
/*******************************Calendar Top Navigation*********************************/
div#calendar {
margin:0 auto;
padding:0;
width: 602px;
font-family:special_eliteregular, "Times New Roman", Times, serif;
}
div#calendar div.box {
position:relative;
top:0;
left:0;
width:100%;
height:40px;
background-color: #787878 ;
}
div#calendar div.calendar-header {
line-height:40px;
vertical-align:middle;
position:absolute;
left:11px;
top:0;
width:582px;
height:40px;
text-align:center;
}
div#calendar div.calendar-header a.prev,div#calendar div.calendar-header a.next {
position:absolute;
top:0;
height: 17px;
display:block;
cursor:pointer;
text-decoration:none;
color:#FFF;
}
div#calendar div.calendar-header span.title{
color:#FFF;
font-size:18px;
}
div#calendar div.calendar-header a.prev{
left:0;
}
div#calendar div.calendar-header a.next{
right:0;
}
/*******************************Calendar Content Cells*********************************/
div#calendar div.box-content{
border:1px solid #787878 ;
border-top:none;
}
div#calendar ul.label{
float:left;
padding: 0;
margin: 5px 0 0 5px;
}
div#calendar ul.label li{
padding:0;
margin: 0 5px 0 0;
float:left;
list-style-type:none;
width:80px;
height:40px;
line-height:40px;
vertical-align:middle;
text-align:center;
color:#000;
font-size: 15px;
background-color: transparent;
}
div#calendar ul.dates{
float:left;
padding: 0;
margin: 0 0 5px 5px;
}
/** overall width = width+padding-right**/
div#calendar ul.dates li {
padding:0;
margin: 5px 5px 0 0;
line-height:80px;
vertical-align:middle;
float:left;
list-style-type:none;
width:80px;
height:80px;
font-size:25px;
color:#000;
text-align:center;
&.day {
background-color: #DDD;
}
&.today {
background-color: #0d8ddc;
}
&.has-post {
background-color: #63ad27;
}
}
:focus{
outline:none;
}
div.clear{
clear:both;
}

View File

@@ -0,0 +1,57 @@
@extends('layouts.connected')
@section('content')
<div class="container">
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
<h1 class="page-title">
{{ $month->getDate() }}
</h1>
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
@if (session('success'))
<div class="alert alert-success" role="alert">
{{ session('success') }}
</div>
@endif
@if (session('errors'))
<div class="alert alert-danger" role="alert">
{{ session('errors') }}
</div>
@endif
</div>
</div>
</div>
<div class="row flex-fill">
<div class="col-12">
<div id="calendar">
<div class="box">
<div class="calendar-header">
@php($previous = $month->getPrevious())
@php($next = $month->getNext())
<a class="prev" href="{{ route('calendar', ['type' => $type, 'month' => $previous->format('m'), 'year' => $previous->format('Y')]) }}">Prev</a>
<span class="title">{{ $month->getDate() }}</span>
<a class="next" href="{{ route('calendar', ['type' => $type, 'month' => $next->format('m'), 'year' => $next->format('Y')]) }}">Next</a>
</div></div><div class="box-content">
<ul class="label">
<li class="start title title">Mon</li>
<li class="start title title">Tue</li>
<li class="start title title">Wed</li>
<li class="start title title">Thu</li>
<li class="start title title">Fri</li>
<li class="start title title">Sat</li>
<li class="start title title">Sun</li>
</ul>
<div class="clear"></div>
{!! $month->render() !!}
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
@endsection