Skip to content

Instantly share code, notes, and snippets.

@cmcculloh

cmcculloh/header.html

Last active August 29, 2015 14:01
Show Gist options
  • Save cmcculloh/0e67760dbd3fd33d55b3 to your computer and use it in GitHub Desktop.
Save cmcculloh/0e67760dbd3fd33d55b3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cmcculloh revised this gist May 7, 2014. 2 changed files with 83 additions and 0 deletions.
    0 a.rb → header.html
    View file
    File renamed without changes.
    83 changes: 83 additions & 0 deletions styles.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    /*
    This is your main stylesheet.
    Import other LESS/CSS style sheets into this one.
    If you want more than one stylesheet like this,
    you'll have to add a compile/compress step to the grunt build process.
    For best optimization you should import css as less.
    @import (less) "mycssfile.css"
    */
    @import (inline) "../js/vendor/jquery.ui/dist/jquery-ui.css";
    @import (inline) "../js/vendor/fuelux/fuelux.css";
    @import (inline) "../js/vendor/bootstrap/bootstrap.css";
    @import "../../bower_components/bootstrap/less/variables.less";
    @import "../../bower_components/bootstrap/less/mixins.less";


    @import "app.less";
    @import "header/header.less";
    @import "canvas/canvas.less";

    #canvas-header {
    .make-row();
    }

    #header-info, #header-controls {
    .make-lg-column(4);
    .make-row();
    }

    #header-controls {
    .make-lg-column-offset(4);
    }

    #title, #description, #mode-controls, #save-controls {
    .make-lg-column(12);
    }

    .styles-less {
    font-size: 10px;
    }

    .no-gutter {
    padding: 0;
    }

    .margin-top-15 {
    margin-top: 15px;
    }

    .margin-top-5 {
    margin-top: 5px;
    }

    .margin-top-7 {
    margin-top: 7px;
    }

    .margin-right-8 {
    margin-right: 8px;
    }

    input.editable, textarea.editable {
    border-color: white;
    background-color: transparent;
    box-shadow: none;
    resize: none;
    padding: 0px 4px;
    height: 26px;
    border-radius: 2px;
    }

    textarea.editable {
    height: 32px;
    font-size: .8em;
    color: #999;
    padding: 1px 4px 6px 4px;
    }

    input.editable:hover, input.editable:active, input.editable:focus, textarea.editable:hover, textarea.editable:active, textarea.editable:focus{
    border-color: #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    background-color: #fff;
    }
  2. cmcculloh created this gist May 7, 2014.
    66 changes: 66 additions & 0 deletions a.rb
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    <!--div id="canvas-header" class="container-fluid no-gutter">
    <div class="row-fluid">
    <div class="col-sm-6 col-lg-4">
    <div class="row-fluid">
    <div class="col-sm-12 col-lg-12 no-gutter">
    <div class="title">
    <input class="form-control editable input-lg" id="name-input" type="text" placeholder="{{I18N_NAME}}" value="{{name}}{{^name}}{{I18N_NAME}}{{/name}}">
    </div>
    </div>
    </div>
    <div class="row-fluid">
    <div class="col-sm-12 col-lg-12 no-gutter margin-top-5">
    <div class="desc">
    <textarea class="form-control editable" id="desc-input" type="text">{{description}}{{^description}}{{I18N_DESCRIPTION}}{{/description}}</textarea>
    </div>
    </div>
    </div>
    </div>
    <div class="col-sm-6 col-lg-4 col-lg-offset-4">
    <div class="row margin-top-15">
    <div class="col-sm-12 col-lg-12 text-right">
    <button type="button" class="btn btn-primary btn-sm pull-right" id="saveBtn">{{I18N_SAVE}}</button>
    <div class="pull-right margin-top-7 margin-right-8 small">
    {{I18N_LAST_SAVED}} {{last_saved_date}}
    </div>
    </div>
    </div>
    <div class="clearfix visible-xs"></div>
    <div class="row">
    <div class="col-lg-12 text-right">
    <div class="btn-group">
    <button type="button" class="btn btn-default btn-xs" id="edit-mode">{{I18N_EDIT_MODE}}</button>
    <button type="button" class="btn btn-default btn-xs" id="presentation-mode">{{I18N_PRESENTATION_MODE}}</button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div-->


    <div id="canvas-header" class="no-gutter">
    <div id="header-info">
    <div id="title" class="title no-gutter">
    <input class="form-control editable input-lg" id="name-input" type="text" placeholder="{{I18N_NAME}}" value="{{name}}{{^name}}{{I18N_NAME}}{{/name}}">
    </div>
    <div id="description" class="desc margin-top-5">
    <textarea class="form-control editable" id="desc-input" type="text">{{description}}{{^description}}{{I18N_DESCRIPTION}}{{/description}}</textarea>
    </div>
    </div>
    <div id="header-controls">
    <div id="save-controls" class="margin-top-15 text-right">
    <button type="button" class="btn btn-primary btn-sm pull-right" id="saveBtn">{{I18N_SAVE}}</button>
    <div class="pull-right margin-top-7 margin-right-8 small">
    {{I18N_LAST_SAVED}} {{last_saved_date}}
    </div>
    </div>
    <div class="clearfix visible-xs"></div>
    <div id="mode-controls" class="text-right">
    <div class="btn-group">
    <button type="button" class="btn btn-default btn-xs" id="edit-mode">{{I18N_EDIT_MODE}}</button>
    <button type="button" class="btn btn-default btn-xs" id="presentation-mode">{{I18N_PRESENTATION_MODE}}</button>
    </div>
    </div>
    </div>
    </div>