Skip to content

Commit

Permalink
More progress on responsive front for projects/cup. Currently am unsu…
Browse files Browse the repository at this point in the history 
…re 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.
  • Loading branch information
@alanmmckay
alanmmckay committed Dec 15, 2023
1 parent 357fc58 commit 4fd5ca5
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 67 deletions.
118 changes: 60 additions & 58 deletions projects/cup/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,73 +91,75 @@
<p>
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.
</p>
<div class='slide-deck'>
<hr>
<figure class='slide-deck'>
<ul>

<li class='control_slide'>
<figure>
<img src='../../images/cup_control_01.png' />
<figcaption>
Slide 1/5: Selecting a menu item.
</figcaption>
</figure>
</li>

<li class='control_slide'>
<figure>
<img src='../../images/cup_control_02.png' />
<figcaption>
Slide 2/5: Filling out an event creation form.
</figcaption>
</figure>
</li>

<li class='control_slide'>
<figure>
<img src='../../images/cup_control_03.png' />
<figcaption>
Slide 3/5: Receiving feedback for event created. Selecting an event to edit.
</figcaption>
</figure>
</li>

<li class='control_slide'>
<figure>
<img src='../../images/cup_control_04.png' />
<figcaption>
Slide 4/5: Viewing event edit form; Selecting a new Date of event.
</figcaption>
</figure>
</li>
<figure>
<ul>

<li class='control_slide'>
<figure>
<img src='../../images/cup_control_05.png' />
<figcaption>
Slide 5/5: Receiving feedback for event edited.
</figcaption>
</figure>
</li>
<li class='control_slide'>
<figure>
<img src='../../images/cup_control_01.png' />
<figcaption>
Slide 1/5: Selecting a menu item.
</figcaption>
</figure>
</li>

</ul>
<li class='control_slide'>
<figure>
<img src='../../images/cup_control_02.png' />
<figcaption>
Slide 2/5: Filling out an event creation form.
</figcaption>
</figure>
</li>

<figcaption>
<ul>
<li>
<a class='prev' onclick="plusSlides(-1)"> ❮ </a>
<li class='control_slide'>
<figure>
<img src='../../images/cup_control_03.png' />
<figcaption>
Slide 3/5: Receiving feedback for event created. Selecting an event to edit.
</figcaption>
</figure>
</li>
<li>
Slideshow Control

<li class='control_slide'>
<figure>
<img src='../../images/cup_control_04.png' />
<figcaption>
Slide 4/5: Viewing event edit form; Selecting a new Date of event.
</figcaption>
</figure>
</li>

<li>
<a class='next' onclick='plusSlides(1)'> ❯ </a>
<li class='control_slide'>
<figure>
<img src='../../images/cup_control_05.png' />
<figcaption>
Slide 5/5: Receiving feedback for event edited.
</figcaption>
</figure>
</li>

</ul>
</figcaption>
</figure>
<hr>

<figcaption>
<ul>
<li>
<a class='prev' onclick="plusSlides(-1)"> ❮ </a>
</li>
<li>
Slideshow Control
</li>

<li>
<a class='next' onclick='plusSlides(1)'> ❯ </a>
</li>
</ul>
</figcaption>
</figure>
<hr>
</div>
<p>
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.
</p>
Expand Down
28 changes: 19 additions & 9 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;*/
Expand Down

0 comments on commit 4fd5ca5

Please sign in to comment.