Changeset 1367


Ignore:
Timestamp:
03/17/17 01:24:03 (2 months ago)
Author:
csnyder
Message:

Slideshows, desktop styling

Location:
rockspot
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • rockspot/actions/view.php

    r1359 r1367  
    4949   
    5050  // use display title 
    51   $object->useDisplayTitle(); 
     51  $object->useDisplayTitle( FALSE, TRUE ); 
    5252   
    5353  // wikify content 
  • rockspot/widgets/remove_upload.php

    r1359 r1367  
    2222?> 
    2323<div class="removeupload"> 
    24   <img src="<?=h($imageurl)?>"> 
     24  <img src="<?=h($imageurl)?>" class="noedit nolightbox"> 
    2525  <br><?=hsize($obj->alt->size)?> <?=h($obj->mimetype)?> 
    2626  <br><?=$widget->f_bool( $form, $key, $attributes )?><label for="<?=$form->hname( $key )?>"><?=$form->hlabel( $key )?></label> 
  • rockspot/www/rockspot.css

    r1361 r1367  
    2727/* re-styling */ 
    2828html { font-size: 100%; } 
    29 body { z-index: 1; margin: 0; padding: 0; font: 1em/normal "Gotham A", "Gotham B", "Montserrat", Arial, sans-serif; font-size: 1rem; font-weight: 500; color: rgba(51,51,51,0.86); background-color: #b7b7b7; } 
     29body { z-index: 1; margin: 0; padding: 0; font: 1em/normal "Gotham A", "Gotham B", "Montserrat", Arial, sans-serif; font-size: 1rem; font-weight: 500; color: #333333; background-color: #b7b7b7; } 
    3030h1, h2, h3, h4, h5, p, ul, ol, li, form, nav, section, header, figure, aside { margin: 0; padding: 0; } 
    3131h1, h2, h3, h4, h5 { margin-bottom: 0.5em; } 
     
    7575 
    7676/* Structure */ 
    77 #Canvas { position: relative; width: 100%; max-width: 940px; margin: 0 auto; background-color: #ffffff; } 
     77#Canvas { position: relative; width: 100%; margin: 0 auto; background-color: #ffffff; } 
    7878 
    7979/* Header */ 
    80 #Header { position: -webkit-sticky; position: sticky; top: 0px; z-index: 3; min-height: 51px; width: 100%; max-width: 940px; margin: 0 auto; box-shadow: 0px 0px 6px 0px #b7b7b7; background-color: #ffffff; } 
     80#Header { position: relative; z-index: 100; width: 100%; min-height: 63px; margin: 0 auto; box-shadow: 0px 0px 6px 0px #b7b7b7; background-color: #ffffff; } 
    8181#Header h1 { font-size: 16px; font-size: 1rem; line-height: 25px; line-height: 1.56rem; font-weight: 700; } 
    82 #Logo { float: left; padding: 9px 0 0 15px; } 
    83 #Logo img { width: 57px; height: auto; } 
    84 #MenuOuter { float: right; padding: 10px 16px 0 0; cursor: pointer;  } 
     82#Logo { float: left; padding: 14px 0 0 53px; } 
     83#Logo img { width: 64px; height: auto; } 
     84#MenuOuter { display: none; float: right; padding: 10px 16px 0 0; cursor: pointer;  } 
    8585img.hamburger { vertical-align: -10px; width: 38.5px; height: auto; margin: 1px 0 0 13px; } 
    8686 
    87 #Menu { position: -webkit-sticky; position: sticky; top: 49px; z-index: 4; display: block; overflow: hidden; height: 0px; transition: height 0.4s ease-in; width: 100%; margin-top: -2px; padding: 0; background-color: #ffffff; } 
     87#Menu { display: none; position: -webkit-sticky; position: sticky; top: 49px; z-index: 101; overflow: hidden; height: 0px; transition: height 0.4s ease-in; width: 100%; margin-top: -2px; padding: 0; background-color: #ffffff; } 
    8888#MenuButton { position: relative; z-index: 5; } 
    8989#MenuInner { padding: 27px 0 30px 0; } 
     
    9696/* Heroes & Object */ 
    9797#Heroes { position: relative; width: 100%; overflow: hidden; top: -51px; margin-bottom: -51px; font-size: 0px; line-height: 0px; white-space: nowrap; } 
    98 #HeroesTray { position: relative; left: 0px; } 
     98#HeroesTray { position: relative; left: 0px; transition: left 1s ease-in; } 
     99#HeroesTray.reset { transition: left 0s; } 
    99100#Heroes div.hero { position: relative; display: inline-block; padding-top: 51px; } 
    100101#Heroes img { width: 100%; height: auto; } 
    101 #Heroes nav { position: absolute; bottom: 10px; left: 0px; width: 100%; text-align: center; font-size: 22px; line-height: 22px; } 
    102 #Heroes nav a { display: inline-block; width: 18px; height: 24px; text-align: center; text-decoration: none; } 
     102#Heroes nav { position: absolute; bottom: 21px; left: 0px; width: 100%; text-align: center; font-size: 44px; line-height: 44px; } 
     103#Heroes nav a { display: inline-block; width: 31px; height: 48px; text-align: center; text-decoration: none; } 
    103104#Heroes div.editor { display: none; position: absolute; right: 16px; bottom: 8px; padding: 4px 8px; background-color: rgba( 255, 255, 255, 0.92 ); font-size: 12px; line-height: 12px; } 
    104105#Heroes div.hero:hover div.editor { display: block; } 
     
    106107#Object { margin: 0; min-height: 300px;  } 
    107108#Heroes + #Object { margin-top: -2px; } 
    108 #Main { padding: 0 16px; } 
    109 #Object p { font-size: 15px; font-size: 0.94rem; line-height: 18px; line-height: 1.13rem; font-weight: 500; } 
    110 #Object h1 { font-size: 30px; f1ont-size: 1.88rem; line-height: 33px; line-height: 2.06rem; font-weight: 700; } 
    111 #Object h1.title { position: relative; left: -16px; display: table-cell; margin: 0 -16px; vertical-align: middle; height: 66px; padding: 26px 0px 24px 133px; background-image: url(/www-rockspot/Bar_Circle.png); background-repeat: no-repeat; background-size: 116px 54.5px; background-position: center left; } 
    112 #Object h1.title + p { margin-top: -9px; } 
     109#Main { padding: 0 114px; } 
     110#Object p { font-size: 20px; line-height: 26px; font-weight: 400; } 
     111#Object h1 { font-size: 49px; line-height: 54px; font-weight: 700; } 
     112#Object h1.title { position: relative; left: -114px; display: table-cell; margin: 0 -16px; vertical-align: middle; height: 140px; padding: 26px 0px 24px 322px; background-image: url(/www-rockspot/Bar_Circle.png); background-repeat: no-repeat; background-size: 230px 108px; background-position: 53px center; } 
     113#Object h1.title + p { margin-top: 0px; } 
    113114#Object div.followtitle { padding: 0 38px 0 117px; } 
    114115#Object h2 { font-size: 30px; font-size: 1.88rem; line-height: 33px; line-height: 2.06rem; font-weight: 700; color: #f15a2c; } 
     
    117118#Object h3 { font-size: 21px; font-size: 1.31rem; line-height: 24px; line-height: 1.5rem; font-weight: 700; } 
    118119#Object h4 { font-size: 15px; font-size: 0.94rem; line-height: 18px; line-height: 1.13rem; font-weight: 700; color: #f15a2c; } 
    119 #Object h4.category { display: inline-block; width: auto; min-width: 110px; padding: 5px 4px 4px 4px; background-color: #f15a2c; color: #ffffff; text-transform: uppercase; text-align: center; font-size: 14px; f1nt-size: 0.75rem; line-height: 14px; l1ne-height: 0.75rem; font-weight: 500; letter-spacing: 0.75px; } 
     120#Object h4.category { display: inline-block; width: auto; min-width: 110px; padding: 4px 26px 6px 28px; background-color: #f15a2c; color: #ffffff; text-transform: uppercase; text-align: center; font-size: 25px; line-height: 25px; font-weight: 500; letter-spacing: 0.75px; } 
    120121#Object h4.category a { color: #ffffff; text-decoration: none; } 
    121122#Object strong { font-weight: 700; } 
     
    136137#Object img { max-width: 100%; height: auto; } 
    137138 
    138 #Object img.full { max-width: none; width: 100vw; margin: 0 -16px; } 
     139#Object img.full { max-width: 940px; width: 100vw; margin: 0 -16px; } 
    139140#Object img.thumbnail { float: left; width: 32%; margin: 0.3em 0.8em 0.3em 0em; } 
    140141#Object img.raw { max-width: none; }  
     
    243244table.form div.sortable p { width: 13em; padding: 0.25em; margin: 0 0 0.33em 0; border: 1px solid #ccc; cursor: move; } 
    244245table.form img.processing { vertical-align: middle; margin-left: 0.25em; } 
    245 table.form div.removeupload img { max-width: 160px; background-color: #e7e7e7; } 
     246table.form div.removeupload img { max-width: 160px !important; background-color: #e7e7e7; } 
    246247 
    247248/* custom widgets */ 
     
    294295 
    295296/* Screen width alts */ 
    296 .screensize { visibility: hidden; position: absolute; top: 0px; z-index: 5; margin: 0 auto; width: 320px; font: 9px/11px Verdana, sans-serif; color: #b7b7b7; text-align: center; } 
     297.screensize { visibility: hidden; position: absolute; top: 0px; z-index: 105; margin: 0 auto; width: 320px; font: 9px/11px Verdana, sans-serif; color: #b7b7b7; text-align: center; } 
    297298.screensize-mobile { display: none; } 
    298299.screensize-desktop { display: block; } 
     
    307308  .screensize-mobile { display: block; } 
    308309  .screensize-desktop { display: none; } 
    309  
     310   
     311  body { color: rgba(51,51,51,0.86); } 
     312 
     313  #Header { position: -webkit-sticky; position: sticky; top: 0px; z-index: 100; min-height: 51px; } 
     314  #Logo { padding: 9px 0 0 15px; } 
     315  #Logo img { width: 57px; height: auto; } 
     316  #MenuOuter { display: block; } 
     317  #Menu { display: block; } 
     318   
     319  #Heroes nav { bottom: 10px; left: 0px; font-size: 22px; line-height: 22px; } 
     320  #Heroes nav a { width: 18px; height: 24px; } 
     321   
     322  #Main { padding: 0 16px; } 
     323  #Object p { font-size: 15px; line-height: 18px; font-weight: 500; } 
     324  #Object h1 { font-size: 30px; line-height: 33px; } 
     325  #Object h1.title { left: -16px; height: 66px; padding: 26px 0px 24px 133px; background-image: url(/www-rockspot/Bar_Circle.png); background-size: 116px 54.5px; } 
     326  #Object h1.title + p { margin-top: -9px; } 
     327  #Object h4.category { min-width: 110px; padding: 5px 4px 4px 4px; font-size: 14px; line-height: 14px; letter-spacing: 0.75px; } 
    310328  #Object img.preview { width: 100vw; } 
    311329   
  • rockspot/www/rockspot.js

    r1361 r1367  
    8383 
    8484// hero photos 
    85 var hero = { "version": "1.0", "slides": [], "active": 0, "hashes": [], "swipeon": 0, "scrollblock": false, "duration": 5.5, "timeout": null, "locked": false, "manual": false }; 
     85var hero = { "version": "1.0", "tray": false, "trayoffset": { "x": 0 }, "framesize": false, "slides": [], "active": false, "hashes": [], "swipeon": 0, "scrollblock": false, "duration": 5.5, "timeout": null, "locked": false, "manual": false }; 
    8686hero.goManual = function() { 
    8787  hero.manual = true; 
     
    8989    window.clearTimeout( hero.timeout ); 
    9090  } 
     91  log("hero: manual on"); 
    9192} 
    9293hero.manualOff = function() { 
    9394  hero.manual = false; 
    94   hero.settimeout(); 
    95 } 
    96 hero.settimeout = function() { 
     95  hero.settimeout( 500 ); 
     96  log("hero: manual off"); 
     97} 
     98hero.settimeout = function( mdur ) { 
    9799  if ( hero.manual ) return; 
    98   var dur = getNodeAttribute( hero.slides[ hero.active ], "duration" ); 
    99   if ( !dur || dur < 0 ) {  
    100     dur = hero.duration; 
    101   } 
    102   var mdur = 1000 * dur; 
     100  if ( arguments.length===0 ) { 
     101    var dur = getNodeAttribute( hero.slides[ hero.active ], "duration" ); 
     102    if ( !dur || dur < 0 ) {  
     103      dur = hero.duration; 
     104    } 
     105    var mdur = 1000 * dur; 
     106  } 
    103107  hero.timeout = window.setTimeout( hero.nextSlide, mdur ); 
    104   log( "Next transition in",mdur,"milliseconds"); 
    105 } 
    106 hero.nextSlide = function() { 
    107   log("hero: next"); 
    108   var next = hero.active + 1; 
     108  log( "hero: next transition in",mdur,"milliseconds"); 
     109} 
     110hero.nextSlide = function( delta ) { 
     111  if ( hero.locked ) return; 
     112  hero.locked = true; 
     113  if ( arguments.length===0 ) { 
     114    delta = 1; 
     115  } 
     116  var next = hero.active + delta; 
    109117  if ( next >= hero.slides.length ) { 
    110     next = 0; 
    111   } 
     118    next = -1 + delta; 
     119  } 
     120  var thishero = hero.slides[ hero.active ]; 
    112121  var nexthero = hero.slides[ next ]; 
    113   //log("hero: next slide is at", nexthero.offset ); 
    114   //$("HeroesTray").style.left = ( 0 - nexthero.offset.x ) + "px"; 
    115   window.location = "#"+nexthero.id; 
     122  // to slide left, first move any children left of thishero to end 
     123  var currentleft = hero.tray.style.left.slice( 0, -2 ); 
     124  if ( currentleft < 0 ) { 
     125    log("hero: currentleft is less than 0", currentleft ); 
     126    var moving = []; 
     127    for ( var c=0; c<hero.tray.childNodes.length; c++ ) { 
     128      if ( hero.tray.childNodes[c].id==thishero.id ) { 
     129        log( "hero: found active slide at",c ); 
     130        break; 
     131      } 
     132      else { 
     133        moving.push( hero.tray.childNodes[c] ); 
     134      } 
     135    } 
     136    if ( moving.length ) { 
     137      for ( var c=0; c < moving.length; c++ ) { 
     138        var ele = removeElement( moving[c] ); 
     139        appendChildNodes( hero.tray, ele ); 
     140      } 
     141    } 
     142    hero.tray.style.left = "0px"; 
     143    currentleft = 0; 
     144    log( "hero: done moving, left is now", hero.tray.style.left ) 
     145  } 
     146  var newleft = Number( currentleft ) - Math.round( hero.framesize.w * delta, 0 ); 
    116147  hero.active = next; 
    117   // set timeout? 
     148  window.setTimeout( "hero.setLeft("+newleft+")", 100 ); 
     149  window.setTimeout( "hero.reset()", 2000 ); 
    118150  if ( !hero.manual ) { 
    119151    hero.settimeout(); 
    120152  } 
    121 } 
    122 hero.prevSlide = function( swipe ) { 
    123   log("hero: prev"); 
    124   var prev = hero.active - 1; 
    125   if ( prev < 0 ) { 
    126     prev = hero.slides.length - 1; 
    127   } 
    128   var prevhero = hero.slides[ prev ]; 
    129   window.location = "#"+prevhero.id; 
    130   hero.active = prev; 
    131 } 
     153  log("hero: finished with next, new left is now", newleft ); 
     154} 
     155hero.prevSlide = function( delta ) { 
     156  if ( hero.locked ) return; 
     157  hero.locked = true; 
     158  if ( arguments.length===0 ) { 
     159    delta = 1; 
     160  } 
     161  var next = hero.active - delta; 
     162  if ( next < 0 ) { 
     163    next = next + hero.slides.length; 
     164  } 
     165  var thishero = hero.slides[ hero.active ]; 
     166  var nexthero = hero.slides[ next ]; 
     167  // to slide right, first move any children right of thishero to beginning 
     168  var currentleft = hero.tray.style.left.slice( 0, -2 ); 
     169  if ( 1 || currentleft >= 0 ) { 
     170    log("hero: currentleft is greater than or equal 0", currentleft ); 
     171    var moving = []; 
     172    for ( var c=hero.tray.childNodes.length-1; c>=0; c-- ) { 
     173      log("hero: looking at child",c,"which is",hero.tray.childNodes[c].id); 
     174      if ( hero.tray.childNodes[c].id==thishero.id ) { 
     175        log( "hero: found active slide at",c ); 
     176        break; 
     177      } 
     178      else { 
     179        moving.push( hero.tray.childNodes[c] ); 
     180      } 
     181    } 
     182    if ( moving.length ) { 
     183      for ( var c=0; c < moving.length; c++ ) { 
     184        var ele = removeElement( moving[c] ); 
     185        insertSiblingNodesBefore( hero.tray.firstChild, ele ); 
     186        log("hero: moved", ele.id, "to first position"); 
     187      } 
     188    } 
     189    var adjustedleft = Number( currentleft ) - Math.round( hero.framesize.w * moving.length ); 
     190    log("After moving, adjusted left is", adjustedleft ); 
     191    hero.tray.style.left = adjustedleft + "px"; 
     192    currentleft = hero.tray.style.left.slice( 0, -2 ); 
     193    log( "hero: done moving, left is now", hero.tray.style.left ) 
     194  } 
     195  var newleft = Number( currentleft ) + Math.round( hero.framesize.w * delta, 0 ); 
     196  hero.active = next; 
     197  window.setTimeout( "hero.setLeft("+newleft+")", 100 ); 
     198  window.setTimeout( "hero.reset()", 2000 ); 
     199  if ( !hero.manual ) { 
     200    hero.settimeout(); 
     201  } 
     202  log("hero: finished with previous, new left is now", newleft ); 
     203} 
     204hero.setLeft = function( left ) { 
     205  removeElementClass( hero.tray, "reset" ); 
     206  hero.tray.style.left = left + "px"; 
     207} 
     208hero.reset = function() { 
     209  addElementClass( hero.tray, "reset" ); 
     210  hero.locked = false; 
     211} 
     212hero.activeSlide = function( i ) { 
     213  var delta = 0; 
     214  if ( hero.active===false ) { 
     215    hero.active = 0; 
     216  } 
     217  if ( i > hero.active ) { 
     218    delta = i - hero.active; 
     219    hero.nextSlide( delta ); 
     220  } 
     221  else if ( i < hero.active ) { 
     222    delta = hero.active - i; 
     223    hero.prevSlide( delta ); 
     224  } 
     225} 
     226// controller 
    132227hero.slideclick = function( e ) { 
    133228  hero.goManual(); 
     
    135230    hero.nextSlide(); 
    136231  } 
    137   else { 
     232  else if ( e.target().parentNode.tagName=="NAV" ) { 
    138233    hero.navClick( e ); 
    139234  } 
    140235} 
    141236hero.navClick = function( e ) { 
     237  e.stop(); 
    142238  hero.goManual(); 
    143239  var target = e.target(); 
    144240  if ( target.hash ) { 
    145     hero.active = hero.hashes.indexOf( target.hash.slice( 1 ) ); 
    146     log( "hero: nav click #", target.hash.slice( 1 ),"which is slide",hero.active ); 
     241    var requested = hero.hashes.indexOf( target.hash.slice( 1 ) ); 
     242    log( "hero: nav click #", target.hash.slice( 1 ),"which is slide",requested,"(active is "+hero.active+")" ); 
     243    var delta = 0; 
     244    if ( requested < hero.active ) { 
     245      delta = hero.active - requested; 
     246      hero.prevSlide( delta ); 
     247    } 
     248    else if ( requested > hero.active ) { 
     249      delta = requested - hero.active; 
     250      hero.nextSlide( delta ); 
     251    } 
    147252  } 
    148253} 
     
    167272hero.init = function() { 
    168273  if ( $("Heroes") ) { 
     274    hero.tray = $("HeroesTray"); 
     275    hero.trayoffset = getElementPosition( $("Heroes") ); 
     276    hero.framesize = getElementDimensions( $("Heroes") ); 
     277    log("hero: tray offset is", hero.trayoffset, "framesize is", hero.framesize ); 
    169278    // connect slides, set active slide 
     279    var active = 0; 
    170280    hero.slides = iterateElementsByTagAndClassName( "div", "hero", $("Heroes"), function( eles, i ) { 
    171281      connect( eles[i], "onclick", hero, "slideclick" ); 
    172282      if ( hasElementClass( eles[i], "requested" ) ) { 
    173         hero.active = i; 
    174       } 
    175       eles[i].offset = getElementPosition( eles[i], $("Heroes") ); 
     283        log("Found requested slide", eles[i].id ); 
     284        //hero.activeSlide( i ); 
     285        active = i; 
     286      } 
    176287      hero.hashes.push( eles[i].id ); 
    177       //log("hero: found", eles[i].id, "with offset", eles[i].offset ); 
     288      log("hero: found", eles[i].id ); 
    178289    }); 
    179     connect( window, "onscroll", hero, "onScroll" ); 
    180     connect( $("Heroes"), "ontouchstart", hero, "swipeStart" ); 
    181     connect( $("Heroes"), "ontouchend", hero, "swipeEnd" ); 
    182     if ( hero.active > 0 ) { 
    183       // requested slide, wait before starting show 
    184       window.setTimeout( hero.settimeout, 3000 ); 
    185     } 
    186     else if ( hero.slides.length > 1 ) { 
    187       window.setTimeout( hero.settimeout, 500 ); 
     290    if ( active ) { 
     291      hero.activeSlide( active ); 
     292    } 
     293    if ( hero.slides.length > 1 ) { 
     294      connect( window, "onscroll", hero, "onScroll" ); 
     295      connect( $("Heroes"), "ontouchstart", hero, "swipeStart" ); 
     296      connect( $("Heroes"), "ontouchend", hero, "swipeEnd" ); 
     297      if ( hero.active!==false ) { 
     298        // requested slide, wait before starting show 
     299        window.setTimeout( hero.settimeout, 1000 ); 
     300      } 
     301      else { 
     302        hero.active = 0; 
     303        window.setTimeout( hero.settimeout, 100 ); 
     304      } 
    188305    } 
    189306    log("hero: init with active slide", hero.active ); 
Note: See TracChangeset for help on using the changeset viewer.