joshhanley / slides Goto Github PK

preview slides should be clickable to navigate through the preso

preview needs to be hidden or shown on demand

as opposed to having a border to distinguish

• instant transition (no slide)
• slide up/down (as opposed to left/right) - low-priority

Currently only navigable using controls on mobile

draft basic slide deck for testing with annotations on ideal behaviour

Update readme to reflect the changes since moving over to Vue and using the new build process

Simply download and edit slides, without need to install and use npm acknowledging that one would lose the watch functionality.

tailwind breakpoints not functioning as expected with text sizes
appears to be over-ridden by largest size class present in element

doesn't appear to work on edge - background appears, but slides do not. preview mode half open, despite being toggled 'false' in code

Standard slide wrapping divs extracted to components.

refreshing currently resets slides to zero

refresh should ideally remember what slide you were on, and load from that slide

ability to hide preview and controls independently

currently breaking on some mobile devices (pixel 3, iphone SE)

Code for offending slide:

      <div
        class="absolute w-full h-full flex items-center justify-center transition-transform transform duration-1000 translate-x-full"
      >
        <div class="w-full h-full flex items-center justify-center">
          <div
            class="w-full h-full grid grid-cols-2 grid-rows-6 gap-1/12 p-1/12 bg-red-800 text-orange-100 relative"
          >
            <!-- quote slide -->
            <img class="absolute h-12 ml-1/12 mt-16" src="assets/img/logo-icon-white.png" />
            <p
              class="col-span-2 row-start-2 row-span-3 pr-1/4 flex items-end font-display text-4xl"
            >
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua."
            </p>
            <div class="row-start-5 row-span-2">
              <hr class="border-t-2 border-orange-100" />
              <p class="text-2xl md:text-xl mt-4 font-bold italic">Some person.</p>
            </div>
          </div>
        </div>
      </div>

Screen grab:

navigation, preview, and slide counter (e.g. 1 of 12) should be hidden/shown i.e. 'fullscreen mode'

suggest switch in code also 'on/off by default'

permit component-driven design