Skip to content

Commit 9df9e50

Browse files
author
Kaustav Das Modak
committed
First pass at adding a decent UI. Prototype ready
Signed-off-by: Kaustav Das Modak <[email protected]>
1 parent 3081884 commit 9df9e50

File tree

8 files changed

+317
-79
lines changed

8 files changed

+317
-79
lines changed

‎css/app.css‎

Lines changed: 99 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,107 @@
11
body {
2-
font-family: "Fira Sans", "Open Sans", sans;
2+
font-family: "Fira Sans", "Open Sans", "Helvetica Neue", sans-serif;
3+
background-color: #fff;
4+
overflow: hidden;
5+
text-rendering: optimizeLegibility;
36
}
47

5-
.main-section {
6-
margin-top: 15px;
7-
min-height: 100vh;
8+
x-appbar.sticky {
9+
position: absolute;
10+
top: 0;
11+
left: 0;
12+
}
13+
14+
x-flipbox {
15+
position: absolute;
16+
height: calc(100vh - 45px);
17+
padding: 20px;
18+
top: 45px;
19+
left: 0;
20+
overflow: auto;
21+
}
22+
23+
#searchform-inner {
24+
width: 100%;
25+
height: 45px;
26+
position: relative;
27+
}
28+
29+
#searchbox-wrapper {
30+
width: 80%;
31+
margin: 0;
32+
padding: 0;
33+
float: left;
34+
}
35+
36+
#searchsubmit-wrapper {
37+
width: 20%;
38+
margin: 0;
39+
padding: 0;
40+
float: left;
41+
}
42+
43+
#searchbox {
44+
width: 100%;
45+
height: 45px;
46+
outline: 0;
47+
border: 1px solid #999;
48+
padding: 0;
49+
margin: 0;
50+
box-shadow: 0;
51+
border-radius: 0;
52+
text-indent: 10px;
53+
}
54+
55+
#searchsubmit {
56+
display: block;
57+
width: 100%;
58+
height: 45px;
59+
line-height: 45px;
60+
text-align: center;
61+
text-decoration: none;
62+
background-color: #04B309;
63+
color: #fff;
64+
outline: 0;
65+
border: 1px solid #038207;
66+
border-radius: 0;
67+
}
68+
69+
#resultsbox {
70+
list-style-type: none;
71+
margin: 0;
72+
padding: 0;
873
}
974

1075
.resultitem {
1176
word-wrap: break-word;
77+
background-color: #f2f2f2;
78+
border: 1px solid #ebebeb;
79+
margin: 0.3em;
80+
padding: 0.3em;
81+
}
82+
83+
.resultitem:focus {
84+
border-color: #0095DD;
85+
}
86+
87+
.resultitem h4 {
88+
padding: 0;
89+
margin: 0;
90+
font-weight: normal;
91+
}
92+
93+
.wobblebar {
94+
transition: opacity .25s ease-in-out;
95+
opacity: 0.9;
96+
padding-top: 5px;
97+
animation-iteration-count: infinite;
98+
}
99+
100+
.wobblebar.hide {
101+
opacity: 0;
102+
animation-iteration-count: 0;
103+
}
104+
105+
small {
106+
color: #707070;
12107
}

‎css/brick.css‎

Lines changed: 31 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/foundation.min.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎css/wobblebar.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
@keyframes wobblebar {
2+
0% {
3+
left: 5%;
4+
}
5+
6+
3% {
7+
left: 95%;
8+
}
9+
10+
6% {
11+
left: 5%;
12+
}
13+
14+
9% {
15+
left: 95%;
16+
}
17+
18+
12% {
19+
left: 25%;
20+
}
21+
22+
15% {
23+
left: 75%;
24+
}
25+
26+
18% {
27+
left: 25%;
28+
}
29+
30+
27% {
31+
left: 5%;
32+
}
33+
34+
30% {
35+
left: 95%;
36+
}
37+
38+
33% {
39+
left: 5%;
40+
}
41+
42+
36% {
43+
left: 95%;
44+
}
45+
46+
39% {
47+
left: 25%;
48+
}
49+
50+
42% {
51+
left: 75%;
52+
}
53+
54+
45% {
55+
left: 25%;
56+
}
57+
58+
48% {
59+
left: 5%;
60+
}
61+
62+
51% {
63+
left: 95%;
64+
}
65+
66+
63% {
67+
left: 5%;
68+
}
69+
70+
66% {
71+
left: 95%;
72+
}
73+
74+
69% {
75+
left: 25%;
76+
}
77+
78+
72% {
79+
left: 75%;
80+
}
81+
82+
75% {
83+
left: 25%;
84+
}
85+
86+
78% {
87+
left: 5%;
88+
}
89+
90+
81% {
91+
left: 95%;
92+
}
93+
94+
84% {
95+
left: 5%;
96+
}
97+
98+
94% {
99+
left: 75%;
100+
}
101+
102+
97% {
103+
left: 25%;
104+
}
105+
}
106+
107+
/* Styles for old versions of IE */
108+
.wobblebar {
109+
font-family: sans-serif;
110+
font-weight: 100;
111+
}
112+
113+
/* :not(:required) hides this rule from IE9 and below */
114+
.wobblebar:not(:required) {
115+
background: #999;
116+
display: inline-block;
117+
overflow: hidden;
118+
text-indent: -9999px;
119+
width: 100%;
120+
height: 10px;
121+
position: relative;
122+
}
123+
.wobblebar:not(:required)::after {
124+
animation: wobblebar 15000ms infinite ease;
125+
background: white;
126+
border-radius: 5px;
127+
display: block;
128+
content: '';
129+
position: absolute;
130+
top: 3.55556px;
131+
left: 4px;
132+
width: 21.33333px;
133+
height: 5px;
134+
}

‎index.html‎

Lines changed: 28 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -5,77 +5,46 @@
55
<title>Finder</title>
66
<meta name="description" content="Search and pick files from device">
77

8-
<meta name="viewport" content="width=device-width">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
99

1010
<link rel="stylesheet" type="text/css" href="css/normalize.css">
11-
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
11+
<link rel="stylesheet" type="text/css" href="css/brick.css">
12+
<link rel="stylesheet" type="text/css" href="css/wobblebar.css">
1213
<link rel="stylesheet" type="text/css" href="css/app.css">
1314
</head>
1415

1516
<body>
1617

17-
<div class="off-canvas-wrap" data-offcanvas>
18-
<div class="inner-wrap">
19-
20-
<nav class="tab-bar">
21-
22-
<section class="left tab-bar-section">
23-
<h1 class="title">Finder</h1>
24-
</section>
25-
26-
<section class="right-small">
27-
<a class="right-off-canvas-toggle menu-icon"><span></span></a>
28-
</section>
29-
</nav><!-- /.tab-bar -->
30-
31-
<aside id="right-canvas" class="right-off-canvas-menu">
32-
<ul class="off-canvas-list">
33-
<li><a href="index.html">Reset</a></li>
34-
<li><a href="#" data-reveal-id="credits-modal">Credits</a></li>
35-
</ul>
36-
</aside><!-- /.right-off-canvas-menu -->
37-
38-
<section class="main-section">
39-
40-
<div class="row sticky">
41-
<div class="small-12 columns">
42-
<form id="searchform">
43-
<div class="row">
44-
<div class="small-12 columns">
45-
<div class="row collapse">
46-
<div class="small-10 columns">
47-
<input id="searchbox" type="text" placeholder="Search...">
48-
</div>
49-
<div class="small-2 columns">
50-
<a id="searchsubmit" href="#" class="button postfix">Go</a>
51-
</div>
52-
</div>
53-
</div>
54-
</div>
55-
</form>
18+
<x-appbar>
19+
<button id="menu-btn">≡</button>
20+
<h1>Finder</h1>
21+
<button id="reset-btn">Reset</button>
22+
</x-appbar>
23+
<x-flipbox>
24+
<div class="main-content">
25+
<form id="searchform">
26+
<div id="searchform-inner">
27+
<div id="searchbox-wrapper">
28+
<input id="searchbox" type="text" placeholder="Search..." maxlength="20" required>
5629
</div>
57-
</div>
58-
59-
<div class="row">
60-
<div class="small-12 columns" id="resultsbox">
30+
<div id="searchsubmit-wrapper">
31+
<a id="searchsubmit" class="button" href="#">Go</a>
6132
</div>
6233
</div>
63-
64-
</section><!-- /.main-section -->
65-
66-
<a class="exit-off-canvas"></a>
67-
68-
</div><!-- /.inner-wrap -->
69-
</div><!-- /.off-canvas-wrap -->
70-
71-
<div id="credits-modal" class="reveal-modal" data-reveal>
72-
<p class="lead">Built with love by <a href="http://applait.com" target="_blank">Applait</a>.</p>
73-
<p>Finder is powered by <a href="http://github.com/applait/finderjs" target="_blank">FinderJS</a>.</p>
74-
<a class="close-reveal-modal">&#215;</a>
75-
</div><!-- /#credits-modal -->
34+
</form>
35+
<div class="wobblebar hide">Loading...</div>
36+
<ul id="resultsbox"></ul>
37+
</div>
38+
<div class="menu">
39+
<p id="credits" class="lead">
40+
Made with love, by <a href="http://applait.io/" target="_blank">applait</a>.
41+
</p>
42+
<p>Powered by <a href="http://github.com/applait/finderjs" target="_blank">FinderJS</a>.</p>
43+
</div>
44+
</x-flipbox>
7645

7746
<script type="text/javascript" src="js/libs/jquery.js"></script>
78-
<script type="text/javascript" src="js/libs/foundation.min.js"></script>
47+
<script type="text/javascript" src="js/libs/brick.js"></script>
7948
<script type="text/javascript" src="js/libs/EventEmitter.min.js"></script>
8049
<script type="text/javascript" src="js/libs/applait.finder.js"></script>
8150
<script type="text/javascript" src="js/app.js"></script>

0 commit comments

Comments
 (0)