Permalink
Browse files

add react, split up lib base and page js, rewrite admin console in react

  • Loading branch information...
1 parent e673b0c commit 7371345c130730ca1abe3899ae65085422471564 @sbezboro committed May 21, 2015
Showing with 794 additions and 563 deletions.
  1. +4 −0 package.json
  2. +73 −47 standardweb/assets.py
  3. 0 standardweb/static/css/{thirdparty → lib}/bbcode-editor.css
  4. 0 standardweb/static/css/{thirdparty → lib}/bbcode.css
  5. 0 standardweb/static/css/{thirdparty → lib}/font-awesome.min.css
  6. 0 standardweb/static/css/{thirdparty → lib}/tipsy.css
  7. +121 −83 standardweb/static/css/local/pages/admin.less
  8. 0 standardweb/static/js/{thirdparty → lib}/ZeroClipboard.min.js
  9. 0 standardweb/static/js/{thirdparty → lib}/jquery-1.8.3.min.js
  10. 0 standardweb/static/js/{thirdparty → lib}/jquery.flot.min.js
  11. 0 standardweb/static/js/{thirdparty → lib}/jquery.placeholder.min.js
  12. 0 standardweb/static/js/{thirdparty → lib}/jquery.sceditor.bbcode.min.js
  13. 0 standardweb/static/js/{thirdparty → lib}/jquery.sceditor.min.js
  14. 0 standardweb/static/js/{thirdparty → lib}/jquery.tipsy.min.js
  15. 0 standardweb/static/js/{thirdparty → lib}/moment.min.js
  16. +18 −0 standardweb/static/js/lib/react-with-addons.min.js
  17. 0 standardweb/static/js/{thirdparty → lib}/socket.io.min.js
  18. 0 standardweb/static/js/{thirdparty → lib}/soundmanager2.min.js
  19. +25 −0 standardweb/static/js/local/base.js
  20. +0 −191 standardweb/static/js/local/console.js
  21. +7 −0 standardweb/static/js/local/pages/admin.js
  22. +348 −0 standardweb/static/js/local/react/admin.jsx
  23. +150 −0 standardweb/static/js/local/react/mixins/stream.jsx
  24. +3 −148 standardweb/static/js/local/realtime.js
  25. +14 −68 standardweb/templates/admin.html
  26. +31 −26 standardweb/templates/base.html
View
@@ -4,5 +4,9 @@
"repository": {
"type": "git",
"url": "https://github.com/sbezboro/stanard-web-flask.git"
+ },
+ "dependencies": {
+ "uglify-js": "^2.4.21",
+ "optipng-bin": "^2.0.4"
}
}
View
@@ -1,58 +1,84 @@
from flask.ext.assets import Bundle, Environment
+from react.jsx import JSXTransformer
+from webassets.filter import Filter, register_filter
from standardweb import app
+class React(Filter):
+ name = 'react'
+ max_debug_level = None
+
+ def output(self, _in, out, **kw):
+ content = _in.read()
+ transformer = JSXTransformer()
+ js = transformer.transform_string(content)
+ out.write(js)
+
+register_filter(React)
env = Environment(app)
-js = Bundle(
- Bundle(
- 'js/thirdparty/jquery-1.8.3.min.js',
- 'js/thirdparty/jquery.flot.min.js',
- 'js/thirdparty/jquery.placeholder.min.js',
- 'js/thirdparty/jquery.tipsy.min.js',
- 'js/thirdparty/jquery.sceditor.min.js',
- 'js/thirdparty/jquery.sceditor.bbcode.min.js',
- 'js/thirdparty/moment.min.js',
- 'js/thirdparty/socket.io.min.js',
- 'js/thirdparty/soundmanager2.min.js',
- 'js/thirdparty/ZeroClipboard.min.js'
+bundles = {
+ 'css_all': Bundle(
+ Bundle(
+ 'css/lib/font-awesome.min.css',
+ 'css/lib/tipsy.css',
+ 'css/lib/bbcode.css',
+ ),
+ Bundle(
+ 'css/local/ansi.less',
+ 'css/local/base.less',
+ 'css/local/colors.less',
+ 'css/local/fonts.less',
+ 'css/local/layouts.less',
+ 'css/local/media.less',
+ 'css/local/mixins.less',
+ 'css/local/pages/*.less',
+ 'css/local/style.css',
+ ),
+ filters='less',
+ output='css/gen/all.min.css'
),
- Bundle(
- 'js/local/base.js',
- 'js/local/chat.js',
- 'js/local/console.js',
- 'js/local/dialog.js',
- 'js/local/graph.js',
- 'js/local/messages.js',
- 'js/local/notifications.js',
- 'js/local/realtime.js',
- 'js/local/site.js',
- ),
- filters='uglifyjs',
- output='js/gen/all.min.js'
-)
-
-css = Bundle(
- Bundle(
- 'css/thirdparty/font-awesome.min.css',
- 'css/thirdparty/tipsy.css',
- 'css/thirdparty/bbcode.css',
+ 'js_lib': Bundle(
+ 'js/lib/jquery-1.8.3.min.js',
+ 'js/lib/jquery.flot.min.js',
+ 'js/lib/jquery.placeholder.min.js',
+ 'js/lib/jquery.tipsy.min.js',
+ 'js/lib/jquery.sceditor.min.js',
+ 'js/lib/jquery.sceditor.bbcode.min.js',
+ 'js/lib/moment.min.js',
+ 'js/lib/react-with-addons.min.js',
+ 'js/lib/socket.io.min.js',
+ 'js/lib/soundmanager2.min.js',
+ 'js/lib/ZeroClipboard.min.js',
+ filters='uglifyjs',
+ output='js/gen/lib.min.js'
),
- Bundle(
- 'css/local/ansi.less',
- 'css/local/base.less',
- 'css/local/colors.less',
- 'css/local/fonts.less',
- 'css/local/layouts.less',
- 'css/local/media.less',
- 'css/local/mixins.less',
- 'css/local/pages/*.less',
- 'css/local/style.css',
+ 'js_base': Bundle(
+ Bundle(
+ 'js/local/base.js',
+ 'js/local/chat.js',
+ 'js/local/dialog.js',
+ 'js/local/graph.js',
+ 'js/local/messages.js',
+ 'js/local/notifications.js',
+ 'js/local/realtime.js',
+ 'js/local/site.js',
+ filters='uglifyjs',
+ output='js/gen/local.min.js'
+ ),
+ Bundle(
+ 'js/local/react/mixins/*.jsx',
+ 'js/local/react/*.jsx',
+ filters='react',
+ output='js/gen/react.build.js'
+ )
),
- filters='less',
- output='css/gen/all.min.css'
-)
+ 'js_admin': Bundle(
+ 'js/local/pages/admin.js',
+ filters='uglifyjs',
+ output='js/gen/admin.min.js'
+ )
+}
-env.register('js_all', js)
-env.register('css_all', css)
+env.register(bundles)
@@ -3,81 +3,103 @@
@import '../media';
-.admin-panel {
- .admin-left {
- margin-right: 250px;
-
- @media @tablet, @mobile {
- margin-right: 0px;
- }
- }
+@admin-right-size: 300px;
+@detail-size: 300px;
- .admin-right {
- float: right;
- width: 250px;
+.admin-panel {
+ position: relative;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ a.mute {
+ color: #bbb;
+ position: absolute;
+ right: 24px;
+ text-align: left;
+ top: 10px;
+ width: 14px;
+ z-index: 2;
- @media @tablet, @mobile {
- display: none;
+ &:hover {
+ color: #fff;
}
}
- .console {
- background-color: @black;
- color: #eee;
- font-family: "Lucida Console", Monaco, Consolas, monospace;
- font-size: 10px;
- height: 600px;
- list-style: none;
- overflow-y: scroll;
- overflow-x: hidden;
- padding: 4px;
- -webkit-font-smoothing: none;
+ .admin-left {
+ position: absolute;
+ top: 31px;
+ bottom: 0;
+ left: 0;
+ right: @admin-right-size;
@media @tablet, @mobile {
- font-size: 8px;
+ right: 0;
}
- a {
- color: inherit;
+ &.detail-active {
+ right: @admin-right-size + @detail-size;
}
- }
- .console-notification {
- float: right;
+ .console {
+ .box-sizing(border-box);
+
+ background-color: @black;
+ bottom: 22px;
+ color: #eee;
+ font-family: "Lucida Console", Monaco, Consolas, monospace;
+ font-size: 10px;
+ left: 0;
+ list-style: none;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ padding: 4px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ -webkit-font-smoothing: none;
+
+ @media @tablet, @mobile {
+ font-size: 8px;
+ }
- @media @tablet, @mobile {
- display: none;
+ a {
+ color: inherit;
+ }
}
- }
- .console-textbox {
- .border-radius(0);
- .box-sizing(border-box);
- font-family: "Lucida Console", Monaco, monospace;
- height: 22px;
- width: 100%;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
+ .console-textbox {
+ .border-radius(0);
+ .box-sizing(border-box);
+
+ bottom: 0;
+ font-family: "Lucida Console", Monaco, monospace;
+ height: 22px;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ }
}
.detail {
- float: right;
- width: 240px;
border-right: 1px solid #999;
- height: 100%;
- display: table-cell;
+ bottom: 0;
+ position: absolute;
+ right: @admin-right-size;
+ top: 31px;
+ width: @detail-size;
h3 {
margin: 4px 0 0;
}
- .close {
- .box-sizing(3px);
- color: #222 !important;
- border: 1px solid #bbb;
+ a.close {
+ color: #ccc;
float: right;
- font-size: 12px;
- padding: 0 4px 0 4px;
+
+ &:hover {
+ color: #666;
+ }
}
.detail-inner {
@@ -105,7 +127,7 @@
margin-left: 2px;
}
- span {
+ .stat-value {
display: block;
font-size: 14px;
margin: 2px 6px 4px;
@@ -114,43 +136,59 @@
}
}
- .players {
- overflow-y: scroll;
+ .admin-right {
+ bottom: 0;
+ position: absolute;
+ right: 0;
+ top: 31px;
+ width: @admin-right-size;
- a {
- color: #555 !important;
+ @media @tablet, @mobile {
+ display: none;
}
- .rank {
- color: #777;
- float: right;
- font-size: 14px;
- }
- }
+ .players {
+ bottom: 0;
+ left: 0;
+ overflow-y: auto;
+ position: absolute;
+ right: 0;
+ top: 0;
- .player {
- background: #e5e5e5;
- border-right: 1px solid #ccc;
- border-left: 1px solid #ccc;
- border-top: 1px solid #fff;
- border-bottom: 1px solid #aaa;
- height: 20px;
- padding: 5px;
-
- &.selected {
- background: #ccc;
- border-bottom: 1px solid #cfcfcf;
- border-top: 1px solid #bebebe;
- }
+ a {
+ color: #555 !important;
+ }
- &:hover {
- background: #fff;
+ .rank {
+ color: #777;
+ float: right;
+ font-size: 14px;
+ }
+
+ .player {
+ background: #e5e5e5;
+ border: 1px solid #ccc;
+ border-top-color: #fff;
+ border-bottom-color: #aaa;
+ height: 20px;
+ padding: 5px;
+
+ &.selected {
+ background: #ddd;
+ border-bottom: 1px solid #cfcfcf;
+ border-top: 1px solid #bebebe;
+ }
+
+ &:hover {
+ background: #fff;
+ }
+ }
}
- }
- .users {
- border-top: 2px solid #aaa;
- overflow-y: scroll;
- padding: 5px;
+ .users {
+ border-top: 2px solid #aaa;
+ overflow-y: scroll;
+ padding: 5px;
+ }
}
}
Oops, something went wrong.

0 comments on commit 7371345

Please sign in to comment.