浏览代码

responsive design for workspace

bmallred 9 年之前
父节点
当前提交
c3ac6d7bd8
共有 2 个文件被更改,包括 65 次插入14 次删除
  1. 5 0
      html/default.html
  2. 60 14
      html/workspace.html

+ 5 - 0
html/default.html

@ -6,6 +6,11 @@
6 6
            color: #444;
7 7
        }
8 8
9
        nav .brand-logo {
10
            white-space: nowrap;
11
            overflow-x: hidden;
12
        }
13
9 14
        p {
10 15
            line-height: 2rem;
11 16
        }

+ 60 - 14
html/workspace.html

@ -1,6 +1,20 @@
1 1
{{ define "title" }}Loop: Workspace{{ end }}
2 2
{{ define "styles" }}
3 3
    <style>
4
        nav ul a,
5
        nav .brand-logo {
6
            color: #444;
7
        }
8
9
        nav .brand-logo {
10
            white-space: nowrap;
11
            overflow-x: hidden;
12
        }
13
14
        nav .button-collapse {
15
            color: #26a69a;
16
        }
17
4 18
        pre#editor {
5 19
            height: 100vh;
6 20
        }
@ -71,13 +85,46 @@
71 85
    </style>
72 86
{{ end }}
73 87
{{ define "content" }}
74
    <div class="row">
75 88
76
        <div id="left-pane" class="col s4 m4 l2">
89
    <nav class="white" role="navigation">
90
        <div class="nav-wrapper container">
91
            <div id="slide-out" class="side-nav">
92
                <h4 class="black-text center">Loop</h4>
93
                <div class="row">
94
                    <div class="col s12">
95
                        <select class="teal-text">
96
                            <option value="" disabled>Select a directory</option>
97
                            <option value="Personal" selected>Personal</option>
98
                        </select>
99
                    </div>
100
                    <div class="col s12 center">
101
                        <a class="waves-effect waves-light btn modal-trigger" href="#modal-new-directory">New Content</a>
102
                    </div>
103
                </div>
104
                <div class="row">
105
                    <div class="col s12">
106
                        <div class="collection">
107
                            {{ range $d := .Directories }}
108
                                {{ if eq $d $.Title }}
109
                                    <a class="collection-item active" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
110
                                {{ else }}
111
                                    <a class="collection-item" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
112
                                {{ end }}
113
                            {{ end }}
114
                        </div>
115
                    </div>
116
                </div>
117
            </div>
118
            <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
119
            <div class="brand-logo">{{ .Title }}</div>
120
        </div>
121
    </nav>
122
123
    <div class="row">
124
        <div id="left-pane" class="col l2 hide-on-med-and-down">
77 125
            <div class="row">
78 126
                <div class="col s12">
79
                    <label>Workspace</label>
80
                    <select>
127
                    <select class="teal-text">
81 128
                        <option value="" disabled>Select a directory</option>
82 129
                        <option value="Personal" selected>Personal</option>
83 130
                    </select>
@ -88,21 +135,20 @@
88 135
            </div>
89 136
            <div class="row">
90 137
                <div class="col s12" style="overflow-y: auto;">
91
                    <ul class="collection">
138
                    <div class="collection">
92 139
                        {{ range $d := .Directories }}
93
                            <li class="collection-item avatar dismissable">
94
                                <i class="mdi-file-folder circle"></i>
95
                                <span class="title"><a href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a></span>
96
                                <p><!--(3 files)--></p>
97
                                <a href="#" class="secondary-content"><i class="mdi-action-grade"></i></a>
98
                            </li>
140
                            {{ if eq $d $.Title }}
141
                                <a class="collection-item active" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
142
                            {{ else }}
143
                                <a class="collection-item" href="/{{ $.Username }}/edit/{{ $d | urlquery }}">{{ $d }}</a>
144
                            {{ end }}
99 145
                        {{ end }}
100
                    </ul>
146
                    </div>
101 147
                </div>
102 148
            </div>
103 149
        </div>
104 150
105
        <div id="workarea" class="col s8 m8 l10">
151
        <div id="workarea" class="col s12 m12 l10">
106 152
            <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
107 153
                <a id="create" class="btn-floating btn-large red" title="Edit">
108 154
                    <i class="large mdi-editor-mode-edit"></i>
@ -128,7 +174,6 @@
128 174
                            <span class="hide-on-med-and-down">Preview</span>
129 175
                        </a>
130 176
                    </div>
131
                    <div class="col s12 m12 l12"><h4>{{ .Title }}</h4></div>
132 177
                    <pre id="editor" class="col s12 m12 l12">{{ .Content }}</pre>
133 178
                    <iframe id="view" class="col s12 m12 l12" style="display: none;" frameBorder="0" seamless="seamless" src="/{{ .Username }}/edit/{{ .Title | urlquery }}/preview"></iframe>
134 179
                </div>
@ -304,6 +349,7 @@
304 349
305 350
            $('select').material_select();
306 351
            $('.modal-trigger').leanModal();
352
            $('.button-collapse').sideNav();
307 353
308 354
            $('#fullscreen').click(function (event) {
309 355
                event.preventDefault();