Skip to content

Commit 756510a

Browse files
tabesintabesin
authored
Merge pull request #127 from meets2tarun/notch
Added top bar to generator
2 parents 59d908b + 326bf75 commit 756510a

24 files changed

+298
-29
lines changed

‎static/Pslab.png

3.74 KB
Loading

‎static/blog.png

429 Bytes
Loading

‎static/bug.png

1.83 KB
Loading

‎static/code.png

869 Bytes
Loading

‎static/eventyay.png

2.38 KB
Loading

‎static/fossasia.png

15.2 KB
Loading

‎static/js/form.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* global $ */
2+
3+
var customMenuButton = $(".custom-menubutton");
4+
var menuContent = $(".custom-menu-cont");
5+
var fontAwesomeIcom=$(".glyphicon-th");
6+
7+
customMenuButton.click(function() {
8+
menuContent.toggleClass("hidden");
9+
$(this).toggleClass("custom-menubutton-color");
10+
});
11+
12+
$(".custom-menu-item").click(function () {
13+
menuContent.addClass("hidden");
14+
customMenuButton.removeClass("custom-menubutton-color");
15+
});
16+
17+
$(document).mouseup(function(e) {
18+
// if the target of the click is not the button,
19+
// the container, or descendants of the container
20+
if (!$(e.target).is(customMenuButton) && !$(e.target).is(menuContent) && menuContent.has(e.target).length === 0 && !$(e.target).is(fontAwesomeIcom)) {
21+
menuContent.addClass("hidden");
22+
customMenuButton.removeClass("custom-menubutton-color");
23+
}
24+
});

‎static/loklak.png

34.1 KB
Loading

‎static/phimp.png

17.8 KB
Loading

‎static/susi.png

22.8 KB
Loading

‎static/susper.png

7.62 KB
Loading

‎templates/icons/Pslab.png

3.74 KB
Loading

‎templates/icons/blog.png

429 Bytes
Loading

‎templates/icons/bug.png

1.83 KB
Loading

‎templates/icons/code.png

869 Bytes
Loading

‎templates/icons/eventyay.png

2.38 KB
Loading

‎templates/icons/fossasia.png

15.2 KB
Loading

‎templates/icons/github.png

1.8 KB
Loading

‎templates/icons/loklak.png

34.1 KB
Loading

‎templates/icons/phimp.png

17.8 KB
Loading

‎templates/icons/susi.png

22.8 KB
Loading

‎templates/icons/susper.png

7.62 KB
Loading

‎templates/index.html

Lines changed: 250 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,50 +3,271 @@
33

44
<head>
55
<meta charset="UTF-8">
6+
<meta content="IE=edge" http-equiv="X-UA-Compatible">
67
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">
89
<link rel="stylesheet" href="{{ url_for('static',filename='css/menu.css') }}">
910
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/font-awesome.min.css') }}">
10-
11+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
12+
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
1113
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
1214
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
15+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
16+
<script src="{{ url_for('static', filename='js/form.js') }}"></script>
1317
<title>Meilix ISO Generator</title>
18+
<style>
19+
.error {
20+
font-weight: normal;
21+
}
22+
/* made changes-1 added from here */
23+
label.error{
24+
color:red;
25+
display:block;
26+
}
27+
ul>label.error{
28+
position: absolute;
29+
}
30+
/* made changes-1 till here */
31+
32+
html {
33+
height: 100%;
34+
}
35+
36+
body {
37+
position: relative;
38+
min-height: 100%;
39+
padding-bottom: 40px;
40+
}
41+
42+
.custom-navbar {
43+
padding: 10px 15px;
44+
border-bottom: 1px solid #bfbfbf;
45+
z-index: -1;
46+
}
47+
48+
.custom-navtitle {
49+
display: inline-block;
50+
margin: 0px;
51+
font-size: 20px;
52+
color: black;
53+
}
54+
55+
h3.custom-navtitle {
56+
position: relative;
57+
}
58+
59+
.custom-menubutton {
60+
position: absolute;
61+
top:0px;
62+
right: 40px;
63+
cursor: pointer;
64+
padding: 10px;
65+
height:50px;
66+
width: 50px;
67+
display: flex;
68+
justify-content: center;
69+
align-items: center;
70+
}
71+
72+
.custom-menubutton:hover {
73+
background-color:#F0EEEE;
74+
}
75+
76+
.custom-menu-cont {
77+
position: relative;
78+
}
79+
80+
.custom-menu-cont.hidden {
81+
display: none;
82+
}
83+
84+
.custom-menu-cont-shown {
85+
display: inline-block;
86+
}
87+
88+
.custom-menu {
89+
min-height: 350px;
90+
width: 327px;
91+
position: absolute;
92+
border: 1px solid #bfbfbf;
93+
border-top: none;
94+
right: 40px;
95+
top: 0px;
96+
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.176);
97+
background-color: white;
98+
padding:28px;
99+
}
100+
101+
.arrow-up {
102+
width: 7px;
103+
height: 7px;
104+
border-left: 6px solid transparent;
105+
border-right: 6px solid transparent;
106+
border-bottom: 7px solid white;
107+
position: absolute;
108+
right:17px;
109+
top:-7px;
110+
}
111+
112+
.custom-menu-cont {
113+
z-index: 3;
114+
}
115+
116+
.custom-menu-item {
117+
border: 1px solid white;
118+
display: inline-block;
119+
width: 87px;
120+
padding: 10px 0;
121+
text-align: center;
122+
-webkit-box-sizing: border-box;
123+
-moz-box-sizing: border-box;
124+
box-sizing: border-box;
125+
}
126+
127+
.custom-menu-item a {
128+
color: #737373;
129+
text-decoration: none;
130+
outline: none;
131+
}
132+
133+
.custom-menu-item img {
134+
display: block;
135+
margin: 0 auto 5px auto;
136+
height: auto;
137+
width: auto;
138+
max-height: 50px;
139+
max-width: 60px;
140+
}
141+
142+
.custom-menu-item p {
143+
height:28px;
144+
margin:0px;
145+
}
146+
147+
.custom-menu-item:hover {
148+
border:1px solid #e7e7e7;
149+
}
150+
151+
.custom-menubutton-color {
152+
background-color: #e7e7e7;
153+
}
154+
155+
.custom-icon {
156+
height:50px;
157+
display: flex;
158+
justify-content: center;
159+
align-items: center;
160+
}
161+
162+
#deployment {
163+
position: absolute;
164+
text-align: center;
165+
width: 100%;
166+
padding: 10px;
167+
bottom: 0px;
168+
border-top: 1px solid #bfbfbf;
169+
background-color: #f9f9f9;
170+
}
171+
172+
@media(max-width: 768px){
173+
.custom-navtitle, .custom-menubutton {
174+
font-size: 15px;
175+
}
176+
177+
.custom-arrow {
178+
right: 40px;
179+
}
180+
}
181+
182+
#message {
183+
display: none;
184+
color: green;
185+
}
186+
187+
@media(max-width: 400px){
188+
.custom-menu {
189+
width: 250px;
190+
}
191+
}
192+
</style>
14193
</head>
15194

16195
<body>
17196
<!--file upload form-->
18197
<form method="POST" enctype="multipart/form-data">
19-
<nav class="navbar navbar-toggleable-md navbar-light">
20-
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
21-
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
22-
</button>
23-
<ul class="navbar-nav mr-auto">
24-
<li class="nav-item active">
25-
<a class="navbar-brand" href="#">
26-
<img class="d-inline-block align-top" src="{{ url_for('static', filename='meilix_flower.png') }}" class="img" alt="meilix generator"
27-
width="270" height="65">
28-
</a>
29-
</li>
30-
</ul>
31-
<ul class="navbar-nav">
32-
<li class="nav-item dropdown">
33-
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
34-
<span class="navbar-toggler-icon"></span>
35-
</a>
36-
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
37-
<a class="dropdown-item" href="#about">
38-
<i class="fa fa-info-circle" aria-hidden="true"></i> About </a>
39-
<a class="dropdown-item" href="https://github.com/fossasia/meilix-generator">
40-
<i class="fa fa-github" aria-hidden="true"></i> Github </a>
41-
</div>
42-
</li>
43-
</ul>
44-
</nav>
198+
<div class="custom-navbar">
199+
<a href='.' class="custom-navtitle">
200+
<strong>Meilix Generator</strong>
201+
</a>
202+
<div class="custom-menubutton">
203+
<i class="glyphicon glyphicon-th" style="font-size:20px;"></i>
204+
</div>
205+
</div>
206+
<div class="custom-menu-cont hidden">
207+
<div class="custom-menu">
208+
<div class="arrow-up"></div>
209+
<div>
210+
<div class="custom-menu-item">
211+
<a href="http://github.com/fossasia/meilix-generator" target="_blank">
212+
<div class="custom-icon"><img src="{{ url_for('static', filename='code.png') }}"></div>
213+
<p class="custom-title">Code</p></a>
214+
</div>
215+
<div class="custom-menu-item">
216+
<a href="http://github.com/fossasia/meilix-generator/issues" target="_blank">
217+
<div class="custom-icon"><img src="{{ url_for('static', filename='bug.png') }}"></div>
218+
<p class="custom-title">Bug Report</p></a>
219+
</div>
220+
<div class="custom-menu-item">
221+
<a href="http://blog.fossasia.org" target="_blank">
222+
<div class="custom-icon"><img src="{{ url_for('static', filename='blog.png') }}"></div>
223+
<p class="custom-title">Blogs</p></a>
224+
</div>
225+
<hr style="margin-bottom: 10px; margin-top: 10px;">
226+
<div class="custom-menu-item">
227+
<a href="https://eventyay.com/" target="_blank">
228+
<div class="custom-icon"><img src="{{ url_for('static', filename='eventyay.png') }}"></div>
229+
<p class="custom-title">Eventyay</p></a>
230+
</div>
231+
<div class="custom-menu-item">
232+
<a href="https://susper.com/" target="_blank">
233+
<div class="custom-icon"><img src="{{ url_for('static', filename='susper.png') }}" style="width: 60px;height: 16px;"></div>
234+
<p class="custom-title">Susper</p></a>
235+
</div>
236+
<div class="custom-menu-item">
237+
<a href="https://chat.susi.ai/" target="_blank">
238+
<div class="custom-icon"><img src="{{ url_for('static', filename='susi.png') }}"></div>
239+
<p class="custom-title">Susi</p></a>
240+
</div>
241+
<div class="custom-menu-item">
242+
<a href="https://fossasia.org/" target="_blank">
243+
<div class="custom-icon"><img src="{{ url_for('static', filename='fossasia.png') }}"></div>
244+
<p class="custom-title">FOSSASIA</p></a>
245+
</div>
246+
<div class="custom-menu-item">
247+
<a href="https://loklak.org/" target="_blank">
248+
<div class="custom-icon"><img src="{{ url_for('static', filename='loklak.png') }}"></div>
249+
<p class="custom-title">loklak</p></a>
250+
</div>
251+
<div class="custom-menu-item">
252+
<a href="https://phimp.me/" target="_blank">
253+
<div class="custom-icon"><img src="{{ url_for('static', filename='phimp.png') }}"></div>
254+
<p class="custom-title">Phimp.me</p></a>
255+
</div>
256+
<div class="custom-menu-item">
257+
<a href="https://pslab.fossasia.org" target="_blank">
258+
<div class="custom-icon"><img src="{{ url_for('static', filename='Pslab.png') }}"></div>
259+
<p class="custom-title">PS Lab</p></a>
260+
</div>
261+
<hr style="margin: 10px">
262+
<div style="display: flex;justify-content: center;align-items: center; margin: 0 0 -20px 0">
263+
<a href="https://labs.fossasia.org/" target="_blank" style="text-decoration: none;color: #737373">More on labs.fossasia.org</a>
264+
</div>
265+
</div>
266+
</div>
267+
</div>
45268
<div class="container">
46269
<div class="row mt-3">
47270
<div class="col-md-4 mx-auto">
48-
<h2 align="center">Meilix Generator</h2>
49-
<p align="center">Create your own Lubuntu Distribution</p>
50271
<div class="form-group">
51272
<label class="heading" id="label" for="email">Email</label>
52273
<input autofocus="" class="form-control" placeholder="Enter email" name="email" title="Email for sending the ISO" required="" type="email">

‎templates/js/form.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* global $ */
2+
3+
var customMenuButton = $(".custom-menubutton");
4+
var menuContent = $(".custom-menu-cont");
5+
var fontAwesomeIcom=$(".glyphicon-th");
6+
7+
customMenuButton.click(function() {
8+
menuContent.toggleClass("hidden");
9+
$(this).toggleClass("custom-menubutton-color");
10+
});
11+
12+
$(".custom-menu-item").click(function () {
13+
menuContent.addClass("hidden");
14+
customMenuButton.removeClass("custom-menubutton-color");
15+
});
16+
17+
$(document).mouseup(function(e) {
18+
// if the target of the click is not the button,
19+
// the container, or descendants of the container
20+
if (!$(e.target).is(customMenuButton) && !$(e.target).is(menuContent) && menuContent.has(e.target).length === 0 && !$(e.target).is(fontAwesomeIcom)) {
21+
menuContent.addClass("hidden");
22+
customMenuButton.removeClass("custom-menubutton-color");
23+
}
24+
});

0 commit comments

Comments
 (0)