From 4fd5ca51ef70fd7611f66cc82c1e2b5ad7f88996 Mon Sep 17 00:00:00 2001 From: Alan Date: Fri, 15 Dec 2023 22:45:11 +0000 Subject: [PATCH] More progress on responsive front for projects/cup. Currently am unsure of how to handle the slideshow as resolutions get smaller and smaller. The route being taken at this point is to outright disable it. I may instead take screenshots of the mobile version of the control page and have a media query swap them out. --- projects/cup/index.php | 118 +++++++++++++++++++++-------------------- style.css | 28 ++++++---- 2 files changed, 79 insertions(+), 67 deletions(-) diff --git a/projects/cup/index.php b/projects/cup/index.php index 6387fce..01f97af 100644 --- a/projects/cup/index.php +++ b/projects/cup/index.php @@ -91,73 +91,75 @@

Implementation of the content management system would be through a PHP back-end interacting with a MySQL database. Here, user accounts could be created, events could be posted and edited, and a new set of control was provided as shop integration where Dawn could post products being sold via an online retail service. All this control was provided through a set of control pages that she could access using any browser. These control pages would leverage a simple bootstrap theme to allow mobile access for her and her employees; I was not shy to use the hamburger button in the context of using these control pages.

+
-
-
    - -
  • -
    - -
    - Slide 1/5: Selecting a menu item. -
    -
    -
    • - -
  • -
    - -
    - Slide 2/5: Filling out an event creation form. -
    -
    -
    • - -
  • -
    - -
    - Slide 3/5: Receiving feedback for event created. Selecting an event to edit. -
    -
    -
    • - -
  • -
    - -
    - Slide 4/5: Viewing event edit form; Selecting a new Date of event. -
    -
    -
    • +
    +
      -
    • -
      - -
      - Slide 5/5: Receiving feedback for event edited. -
      -
      -
      • +
    • +
      + +
      + Slide 1/5: Selecting a menu item. +
      +
      +
      • -
    +
  • +
    + +
    + Slide 2/5: Filling out an event creation form. +
    +
    +
    • -
    -
      -
    • - +
    • +
      + +
      + Slide 3/5: Receiving feedback for event created. Selecting an event to edit. +
      +
      • -
    • - Slideshow Control + +
    • +
      + +
      + Slide 4/5: Viewing event edit form; Selecting a new Date of event. +
      +
      • -
    • - +
    • +
      + +
      + Slide 5/5: Receiving feedback for event edited. +
      +
      • +
    -
    -
    -
    + +
    + +
    +
+
+

The public-facing pages of the Cup of Joe website were then templated using PHP and thus integrated access to the database to allow the display of events and shop links. The mobile redesign was made easier through the modularity provided through this template.

diff --git a/style.css b/style.css index 6a6cc4b..951c040 100644 --- a/style.css +++ b/style.css @@ -247,38 +247,38 @@ figure.image-collage ul li{ display:none; } -figure.slide-deck figcaption ul{ +div.slide-deck figure figcaption ul{ margin:auto; text-align:center; } -figure.slide-deck figcaption ul li{ +div.slide-deck figure figcaption ul li{ display:inline-block; } -figure.slide-deck ul li{ +div.slide-deck figure ul li{ list-style-type:none; } -figure.slide-deck ul li figure img{ +div.slide-deck figure ul li figure img{ border: solid #E9ECEF 3px; /*padding-left:5px; padding-right:5px;*/ } -figure.slide-deck figcaption ul li a{ +div.slide-deck figure figcaption ul li a{ font-size:24px; padding-left:30px; padding-right:30px; cursor:pointer; } -figure.slide-deck figcaption ul li a:hover{ +div.slide-deck figure figcaption ul li a:hover{ color:black; } -figure.slide-deck figcaption ul li:hover{ +div.slide-deck figure figcaption ul li:hover{ color:black; } @@ -389,11 +389,15 @@ figure.slide-deck figcaption ul li:hover{ display:none } - figure.slide-deck figcaption ul li{ + #writingsWrapper div.slide-deck figure ul{ + padding-left:0%; + } + + div.slide-deck figure figcaption ul li{ font-size:16px; } - figure.slide-deck figcaption ul li a{ + div.slide-deck figure figcaption ul li a{ padding:10px; font-size:18px; } @@ -421,6 +425,12 @@ figure.slide-deck figcaption ul li:hover{ } +@media screen and (max-width:400px){ + div.slide-deck{ + display:none; + } +} + @media screen and (max-width:300px){ #writingsWrapper article ul li{ /*list-style-type:none;*/