Skip to content

Commit 2f7ca68

Browse files
devinmattedevinmatte
committed
Adding basic Table UI
Data needed next
1 parent edd5936 commit 2f7ca68

File tree

23 files changed

+3156
-106
lines changed

23 files changed

+3156
-106
lines changed

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,3 +105,7 @@ ENV/
105105

106106
# Configurations
107107
config.py
108+
109+
# Generated Assets
110+
packet/static/css/packet.css
111+
*.min.css

‎Dockerfile‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,16 @@ RUN apt-get -yq update && \
1414

1515
ADD . /opt/packet
1616

17+
RUN curl -sL https://deb.nodesource.com/setup_6.x | bash - && \
18+
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
19+
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
20+
apt-get -yq update && \
21+
apt-get -yq install nodejs npm yarn && \
22+
yarn install && \
23+
npm install -g gulp && \
24+
gulp production && \
25+
rm -rf node_modules && \
26+
apt-get -yq remove nodejs npm yarn && \
27+
apt-get -yq clean all
28+
1729
CMD ["gunicorn", "packet:app", "--bind=0.0.0.0:8080", "--access-logfile=-"]

‎frontend/scss/components/_datatables.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
div {
2+
.dataTables_wrapper {
3+
.dataTable {
4+
margin-top: 0 !important;
5+
}
6+
7+
.dataTables_paginate {
8+
margin: 0 0 10px !important;
9+
text-align: center !important;
10+
11+
@media(max-width: 768px) {
12+
margin-right: 0 !important;
13+
}
14+
}
15+
16+
.dataTables_length {
17+
margin-top: 5px;
18+
margin-left: 15px;
19+
}
20+
21+
.dataTables_filter {
22+
margin-top: 5px;
23+
margin-right: 15px;
24+
}
25+
26+
.col-sm-7 {
27+
width: 100%;
28+
}
29+
}
30+
}

‎frontend/scss/components/_switches.scss‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.material-switch {
2+
input {
3+
display: none;
4+
5+
&:checked {
6+
+ label {
7+
&::before {
8+
opacity: .5;
9+
background: inherit;
10+
}
11+
12+
&::after {
13+
left: 20px;
14+
background: inherit;
15+
}
16+
}
17+
}
18+
}
19+
20+
label {
21+
position: relative;
22+
cursor: pointer;
23+
width: 40px;
24+
height: 0;
25+
26+
&::before {
27+
display: block;
28+
position: absolute;
29+
transition: all .4s ease-in-out;
30+
opacity: .3;
31+
margin-top: -8px;
32+
border-radius: 8px;
33+
box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
34+
background: rgb(0, 0, 0);
35+
width: 40px;
36+
height: 16px;
37+
content: '';
38+
}
39+
40+
&::after {
41+
position: absolute;
42+
top: -4px;
43+
left: -4px;
44+
transition: all .3s ease-in-out;
45+
margin-top: -8px;
46+
border-radius: 16px;
47+
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
48+
background: rgb(255, 255, 255);
49+
width: 24px;
50+
height: 24px;
51+
content: '';
52+
}
53+
}
54+
}

‎frontend/scss/packet.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
$csh-pink: #b0197e;
2+
3+
@import "partials/base";
4+
5+
@import "components/switches";
6+
@import "components/datatables";

‎frontend/scss/partials/_base.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
body {
2+
padding-top: 50px;
3+
}
4+
5+
.main {
6+
margin-top: 50px;
7+
}
8+
9+
@import "global";

‎frontend/scss/partials/_global.scss‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
.navbar-fixed-bottom,
2+
.navbar-fixed-top {
3+
z-index: 900;
4+
}
5+
6+
.sub-header {
7+
border-bottom: 1px solid #eee;
8+
padding-bottom: 10px;
9+
}
10+
11+
.table-fill {
12+
padding: 0;
13+
14+
td,
15+
th {
16+
&:first-of-type {
17+
padding-left: 15px !important;
18+
}
19+
&:last-of-type {
20+
padding-right: 15px !important;
21+
}
22+
}
23+
}
24+
25+
.no-bottom-margin {
26+
margin-bottom: 0;
27+
}
28+
29+
.glyphicon {
30+
&.green {
31+
color: #4da74d;
32+
}
33+
34+
&.red {
35+
color: #cb4b4b;
36+
}
37+
38+
&.yellow {
39+
color: #f1c40f;
40+
}
41+
}
42+
43+
.danger {
44+
background-color: #ff262d;
45+
}
46+
47+
.warning {
48+
background-color: #fb3;
49+
}
50+
51+
.success {
52+
background-color: #00b44a;
53+
}
54+
55+
.white {
56+
color: #fff;
57+
}
58+
59+
.align-center {
60+
text-align: center;
61+
}
62+
63+
.page-title {
64+
margin: 20px 0 30px;
65+
}
66+
67+
tr {
68+
&.disabled {
69+
opacity: .5;
70+
}
71+
}
72+
73+
.footer-version {
74+
display: block;
75+
opacity: .3;
76+
margin: 50px auto 20px;
77+
text-align: center;
78+
color: #000;
79+
font-size: .9em;
80+
&:hover {
81+
text-decoration: none;
82+
color: #000;
83+
}
84+
}
85+
86+
.vcenter {
87+
display: inline-block;
88+
float: none;
89+
vertical-align: middle;
90+
}
91+
92+
.hidden {
93+
display: none;
94+
}
95+
96+
.alert-admin {
97+
margin: 30px 0 -20px;
98+
}
99+
100+
.label-primary {
101+
background-color: $csh-pink;
102+
}
103+
104+
.eval-user-img {
105+
border-radius: 50%;
106+
}

‎gulpfile.js/index.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/*
2+
gulpfile.js
3+
===========
4+
Rather than manage one giant configuration file responsible
5+
for creating multiple tasks, each task has been broken out into
6+
its own file in gulpfile.js/tasks. Any files in that directory get
7+
automatically required below.
8+
9+
To add a new task, simply add a new task file that directory.
10+
gulpfile.js/tasks/default.js specifies the default set of tasks to run
11+
when you run `gulp`.
12+
*/
13+
14+
var requireDir = require('require-dir');
15+
var gulp = require('gulp');
16+
17+
// Require all tasks in gulpfile.js/tasks, including subfolders
18+
requireDir('./tasks', {recurse: true});
19+
20+
// CSS
21+
gulp.task('css', ['sass:compile', 'css:minify']);
22+
23+
// Default task
24+
gulp.task('default', ['css']);
25+
gulp.task('production', ['css', 'generate-favicon', 'pylint']);

‎gulpfile.js/tasks/favicon.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
var gulp = require('gulp');
2+
var realFavicon = require ('gulp-real-favicon');
3+
var fs = require('fs');
4+
5+
// File where the favicon markups are stored
6+
var FAVICON_DATA_FILE = 'faviconData.json';
7+
8+
// Generate the icons. This task takes a few seconds to complete.
9+
// You should run it at least once to create the icons. Then,
10+
// you should run it whenever RealFaviconGenerator updates its
11+
// package (see the check-for-favicon-update task below).
12+
gulp.task('generate-favicon', function(done) {
13+
realFavicon.generateFavicon({
14+
masterPicture: 'packet/static/assets/logo.svg',
15+
dest: 'packet/static',
16+
iconsPath: '/',
17+
design: {
18+
ios: {
19+
pictureAspect: 'backgroundAndMargin',
20+
backgroundColor: '#ffffff',
21+
margin: '35%',
22+
assets: {
23+
ios6AndPriorIcons: false,
24+
ios7AndLaterIcons: false,
25+
precomposedIcons: false,
26+
declareOnlyDefaultIcon: true
27+
}
28+
},
29+
desktopBrowser: {},
30+
windows: {
31+
pictureAspect: 'whiteSilhouette',
32+
backgroundColor: '#9f00a7',
33+
onConflict: 'override',
34+
assets: {
35+
windows80Ie10Tile: true,
36+
windows10Ie11EdgeTiles: {
37+
small: true,
38+
medium: true,
39+
big: true,
40+
rectangle: true
41+
}
42+
}
43+
},
44+
androidChrome: {
45+
pictureAspect: 'noChange',
46+
themeColor: '#222222',
47+
manifest: {
48+
display: 'standalone',
49+
orientation: 'notSet',
50+
onConflict: 'override',
51+
declared: true
52+
},
53+
assets: {
54+
legacyIcon: false,
55+
lowResolutionIcons: false
56+
}
57+
},
58+
safariPinnedTab: {
59+
pictureAspect: 'silhouette',
60+
themeColor: '#222222'
61+
}
62+
},
63+
settings: {
64+
scalingAlgorithm: 'Mitchell',
65+
errorOnImageTooSmall: false,
66+
readmeFile: false,
67+
htmlCodeFile: false,
68+
usePathAsIs: false
69+
},
70+
markupFile: FAVICON_DATA_FILE
71+
}, function() {
72+
done();
73+
});
74+
});

‎gulpfile.js/tasks/minify.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
var gulp = require('gulp');
2+
var cleanCSS = require('gulp-clean-css');
3+
var rename = require("gulp-rename");
4+
5+
// Minify CSS
6+
gulp.task('css:minify', ['sass:compile'], function() {
7+
return gulp.src([
8+
'packet/static/css/*.css',
9+
'!packet/static/css/*.min.css'
10+
])
11+
.pipe(cleanCSS())
12+
.pipe(rename({
13+
suffix: '.min'
14+
}))
15+
.pipe(gulp.dest('packet/static/css'));
16+
});

0 commit comments

Comments
 (0)