Webb Food Services

From the to-do list: Design Edits

✔ update old project services sidebar to new flexible model (Completed by Taylor Bernard on July 20, 2015)

Comments

Justin Bernard on July 17, 2015:

i solved it

be sure to delete ALL the css associated with it currently.  do a search for #services_container, and kill all classes from that first declration, till the class #project_detail #left_column #data_grid { begins, thats the start of the next section.  replace with this:

CSS:
    /*
    // BEGIN SERVICES CHART
    ////////////////////////////////////////////////////////////////////////////////
    */
    #project_detail #left_column #services_container {
      display: block;
      position: relative;
      width: 310px;
      margin-left: 30px;
      border-left: 3px solid #e6e6e7;
    }

      #project_detail #left_column #services_container ul {
        list-style: none;
        padding: 0px;
        border: 0px;
        margin: 0px;
      }

        #project_detail #left_column #services_container ul li {

        }

        #project_detail #left_column #services_container .services {
          margin-bottom: 23px;
        }

        #project_detail #left_column #services_container .last {
          margin-bottom: 0px;
        }

      #project_detail #left_column #services_container .title {
        display: block;
        position: relative;
        top: -4px;
        left: -35px;
        padding-left: 51px;
        padding-bottom: -2px;
        font-family: 'CalibreBold';
        font-size: 21px;
        letter-spacing: 1px;
        text-transform: uppercase;
        background: url('../img/services_title_icon.png') no-repeat 0px 3px;                         
      }

      #project_detail #left_column #services_container .service {
        display: block;
        position: relative;
        left: -9px;
        padding-left: 25px;
        padding-bottom: 2px;
        font-family: 'CalibreRegular';
        font-size: 18px;
        letter-spacing: 1px;
        background: url('../img/services_icon.png') no-repeat 0px 3px;                               
      }

          #project_detail #left_column #services_container li.last {
            background: url('../img/services_icon_last.png') no-repeat 0px 3px;
          }

        #project_detail #left_column #services_container .purple {
          color: #515ca5;
        }

        #project_detail #left_column #services_container .green {
          color: #38a1c0;
        }

        #project_detail #left_column #services_container .gray {
          color: #909194;
        }

        /*
        // END SERVICES CHART
        ////////////////////////////////////////////////////////////////////////////////
        */

Justin Bernard on July 17, 2015:


now i have a new html structure as well. i simplified it a lot, and moved it into a mix of div/ul/li for order. also notice i took out the need to put <br/> in there, it will wrap to multiline auto if it needs to:

<!-- Begin services_container -->  
                    <div id="services_container">
                      
                        <ul class="services">
                            <li class="title purple">Pre-Design Phase</li>
                            <li class="service purple">Strategy Planning/Feasibility Study</li>
                            <li class="service purple">Culinary Product & Concept Dev. (Incl. Menu Engineering)</li>
                            <li class="service purple">Programming</li>
                            <li class="service purple">Concept Design</li>
                        </ul>

                        <ul class="services">
                            <li class="title green">Design Phase</li>
                            <li class="service green">Program Verification</li>
                            <li class="service green">Schematic Design</li>
                            <li class="service green">Design Development</li>
                            <li class="service green">Construction Documents</li>
                            <li class="service green">Plan Check</li>
                        </ul>

                        <ul class="services last">
                            <li class="title gray">Construction Phase</li>
                            <li class="service gray">Bid Review</li>
                            <li class="service gray">Construction Administration</li>
                            <li class="service gray last">Commissioning</li>
                        </ul>

                    </div>
                    <!-- End services_container -->  

Justin Bernard on July 17, 2015:


then you are going to need these 3 images in ./img directory
http://cloud.fleeangrybear.com/3d1N0v2O0R0r

Taylor Bernard on July 19, 2015:

put current files on server at /layton

will get with you in the AM and finish up any loose ends on the design and content sections.

Justin Bernard on July 20, 2015:

what did you do?  on friday i very explicitly asked you to get done with day and make note of what is done or not done, and put files on server, so that i could work on my  stuff over weekend.  you just did that at 11pm on sunday night?  why?

Taylor Bernard on July 20, 2015:

well i was planning on doing a couple more and going over that list this weekend as well. but never got a chance to mess with it. jumped on email a couple times and didnt see any 'about to work on files' emails so thought you may not be messing with it. so last time i was on sunday i threw the files online.