From: Louis Jeckel Date: Tue, 28 Jul 2020 22:45:59 +0000 (+0200) Subject: create pill box compoenent + center covers w/ title X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=2e08f15beb37e2aa7be2f87ffd2c9aebfc66af42;p=psq.git create pill box compoenent + center covers w/ title --- diff --git a/app/View/Components/PillBox.php b/app/View/Components/PillBox.php new file mode 100644 index 0000000..b8a35d1 --- /dev/null +++ b/app/View/Components/PillBox.php @@ -0,0 +1,36 @@ +title = $title; + $this->link = $link; + $this->color = $color; + } + + /** + * Get the view / contents that represent the component. + * + * @return \Illuminate\View\View|string + */ + public function render() + { + return view('components.pill-box'); + } +} diff --git a/public/css/app.css b/public/css/app.css index e27d2e0..d9690be 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -11156,9 +11156,64 @@ div.cover img.cover-bg { } div.cover img.cover-over { - width: 67%; position: absolute; - left: 26%; + width: 56%; + left: 22%; top: 3%; } +div.cover p { + text-transform: uppercase; + color: #074e9c; + background-color: rgba(7, 78, 156, 0.3); + text-align: center; + font-weight: 900; + display: table; + margin: auto; + padding: 0 6px; + font-size: small; +} + +div.pill-box { + position: relative; +} + +div.pill-box img { + width: 50px; + left: -20px; + top: -20px; + position: absolute; + z-index: 2; +} + +div.pill-box div { + background-color: rgba(208, 77, 74, 0.2); + border-radius: 5px; + box-shadow: 4px 5px 11px 1px #aaa; + padding: 5px; + border: 1px solid #d04d4a; +} + +div.pill-box div h2 { + padding: 0 30px; + font-weight: bold; + font-size: large; + color: #d04d4a; + text-align: center; +} + +div.pill-box div > p { + padding: 5px 10px 0 10px; + margin-bottom: 0.5rem; + text-align: center; +} + +div.pill-box div > a { + text-align: right; + text-transform: uppercase; + font-weight: bold; + color: #d04d4a !important; + margin-bottom: 0; + display: block; +} + diff --git a/public/img/cover-bg-center.png b/public/img/cover-bg-center.png new file mode 100644 index 0000000..eb2069c Binary files /dev/null and b/public/img/cover-bg-center.png differ diff --git a/public/img/pill-icon.svg b/public/img/pill-icon.svg new file mode 100644 index 0000000..0ee4c60 --- /dev/null +++ b/public/img/pill-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss index 52a8d4c..8be5f0d 100644 --- a/resources/sass/_variables.scss +++ b/resources/sass/_variables.scss @@ -26,6 +26,7 @@ $cyan: #6cb2eb; $psq_red: #d04d4a; $psq_blue: #074e9c; +$psq_purple: #AD5ED3; $blue: $psq_blue; diff --git a/resources/sass/app.scss b/resources/sass/app.scss index 887e37c..c6ee5db 100644 --- a/resources/sass/app.scss +++ b/resources/sass/app.scss @@ -20,6 +20,10 @@ margin: 1em auto; } + + +//HEADERS + h1 { text-transform: uppercase; margin: auto; @@ -34,6 +38,8 @@ h1 { +//TITLE DOTS + ul.leaders { padding: 0; overflow-x: hidden; @@ -74,16 +80,82 @@ ul.leaders { } + +//COVERS + div.cover { position: relative; + img.cover-bg { width: 100%; } img.cover-over { - width: 67%; position: absolute; - left: 26%; + width: 56%; + left: 22%; top: 3%; } + + p { + text-transform: uppercase; + color: $psq_blue; + background-color: rgba($psq_blue, 0.3); + text-align: center; + font-weight: 900; + display: table; + margin: auto; + padding: 0 6px; + font-size: small; + } +} + + + +//PILL BOXES + +div.pill-box { + position: relative; + + img { + width: 50px; + left: -20px; + top: -20px; + position: absolute; + z-index: 2; + } + + div { + background-color: rgba(208, 77, 74, 0.2); + border-radius: 5px; + box-shadow: 4px 5px 11px 1px #aaa; + padding: 5px; + border: 1px solid $psq_red; + + h2 { + padding: 0 30px; + font-weight: bold; + font-size: large; + color: $psq_red; + text-align: center; + } + + > p { + padding: 5px 10px 0 10px; + margin-bottom: 0.5rem; + text-align: center; + + } + + > a { + text-align: right; + text-transform: uppercase; + font-weight: bold; + color: $psq_red !important; + margin-bottom: 0; + display: block; + + } + } + } diff --git a/resources/views/components/cover.blade.php b/resources/views/components/cover.blade.php index 2e2c85d..c854276 100644 --- a/resources/views/components/cover.blade.php +++ b/resources/views/components/cover.blade.php @@ -1,4 +1,5 @@
- + +

{{$pdf->title}} - {{$pdf->created_at->format('d/m/Y')}}

diff --git a/resources/views/components/pill-box.blade.php b/resources/views/components/pill-box.blade.php new file mode 100644 index 0000000..d5493d9 --- /dev/null +++ b/resources/views/components/pill-box.blade.php @@ -0,0 +1,9 @@ +
+ Pill Icon +
+

{{$title}}

+

{{$slot}}

+ Cliquez-ici +
+ +
diff --git a/resources/views/home/index.blade.php b/resources/views/home/index.blade.php index 9647ed5..4765dda 100644 --- a/resources/views/home/index.blade.php +++ b/resources/views/home/index.blade.php @@ -10,15 +10,11 @@
  • à la une aujourd'hui
    • - - - - - +
    + + +
    +
    +
    + + À ne pas manquer aujourd’hui sur la page agenda, le rendez-vous des acteurs de la santé +et du médicament + +
    + @endsection