From 58250a72ad289a7b1fadac70f14fe99de58834dc Mon Sep 17 00:00:00 2001 From: mntmn Date: Tue, 7 Apr 2020 20:37:41 +0200 Subject: [PATCH] WIP MNT design/UX cleanup --- .gitignore | 2 + package.json | 1 + public/javascripts/spacedeck_sections.js | 50 +- public/javascripts/spacedeck_spaces.js | 10 +- public/javascripts/spacedeck_whiteboard.js | 56 ++- public/stylesheets/style.css | 542 +++++++-------------- routes/api/space_exports.js | 4 +- routes/api/space_memberships.js | 2 +- styles/artifact.scss | 10 +- styles/button.scss | 86 +--- styles/dialog.scss | 8 +- styles/dropdown.scss | 95 ++-- styles/form-checkbox.scss | 3 +- styles/form-select.scss | 14 +- styles/form.scss | 17 - styles/handles.scss | 41 +- styles/header.scss | 7 +- styles/main.scss | 1 - styles/modal.scss | 9 +- styles/normalize.scss | 14 +- styles/space-sections.scss | 39 +- styles/style.scss | 51 +- styles/table.scss | 5 +- styles/toolbar.scss | 54 +- styles/tools.scss | 10 +- styles/vars.scss | 20 +- views/layouts/outer.html | 7 +- views/partials/folders.html | 39 +- views/partials/modal/access.html | 10 +- views/partials/space.html | 160 +----- views/partials/tool/color.html | 12 +- views/partials/tool/layout.html | 4 +- views/partials/tool/text-styles.html | 2 +- views/partials/tool/toolbar-elements.html | 67 ++- views/partials/tool/toolbar-object.html | 58 +-- views/spacedeck.html | 5 +- 36 files changed, 485 insertions(+), 1030 deletions(-) diff --git a/.gitignore b/.gitignore index a216773..600a344 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,8 @@ node_modules javascripts/maps javascripts/spacedeck.js +public/stylesheets/*.css +database.sqlite *.swp *~ diff --git a/package.json b/package.json index 70fcada..59c7369 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "moment": "^2.19.3", "morgan": "^1.9.1", "node-phantom-simple": "2.2.4", + "node-server-screenshot": "^0.2.1", "nodemailer": "^4.6.7", "phantomjs-prebuilt": "^2.1.16", "read-chunk": "^2.1.0", diff --git a/public/javascripts/spacedeck_sections.js b/public/javascripts/spacedeck_sections.js index 04afb53..f7b2b86 100644 --- a/public/javascripts/spacedeck_sections.js +++ b/public/javascripts/spacedeck_sections.js @@ -63,8 +63,8 @@ var SpacedeckSections = { active_style: { border_radius: 0, stroke: 0, - font_family: "Avenir W01", - font_size: 18, + font_family: "Inter", + font_size: 36, line_height: 1.5, letter_spacing: 0, @@ -136,18 +136,8 @@ var SpacedeckSections = { ], fonts: [ - "Arial", - "Courier", - "Georgia", - "Verdana", - "Comic Sans MS", - "Montserrat", - "Lato", - "Roboto", - "Crimson Text", - "EB Garamond", - "Vollkorn", - "Avenir W01" + "Inter", + "Courier" ], detected_text_formats: {}, @@ -180,7 +170,7 @@ var SpacedeckSections = { toolbar_props_in: false, toolbar_artifacts_x: "-1000px", toolbar_artifacts_y: "-1000px", - toolbar_artifacts_in: false + toolbar_artifacts_in: true }, methods: { @@ -1057,7 +1047,7 @@ var SpacedeckSections = { this.toolbar_props_x = pp.x+"px"; this.toolbar_props_y = pp.y+"px"; - this.hide_toolbar_artifacts(); + //this.hide_toolbar_artifacts(); } this.selection_metrics.x1 = sr.x1; @@ -1125,9 +1115,12 @@ var SpacedeckSections = { var er = this.enclosing_rect(this.active_space_artifacts); if (!er) return; - this.active_space.width =Math.max(er.x2+100, window.innerWidth); - this.active_space.height=Math.max(er.y2+100, window.innerHeight); + // resize space + this.active_space.width =Math.max((parseInt(er.x2/window.innerWidth)+2)*window.innerWidth, window.innerWidth); + this.active_space.height=Math.max((parseInt(er.y2/window.innerHeight)+2)*window.innerHeight, window.innerHeight); + console.log("bounds: ",this.active_space.width,this.active_space.height); + if (this._last_bounds_width != this.active_space.width || this._last_bounds_height != this.active_space.height) { this._last_bounds_width = this.active_space.width; @@ -1544,7 +1537,7 @@ var SpacedeckSections = { add_artifact: function (space, item_type, url, evt) { this.active_tool = "pointer"; this.mouse_state = "idle"; - this.hide_toolbar_artifacts(); + //this.hide_toolbar_artifacts(); if (!url && (item_type == 'image' || item_type == 'video' || item_type == 'embed')) { url = prompt("URL?"); @@ -1788,9 +1781,7 @@ var SpacedeckSections = { if (this.active_space_role=="viewer") { return false; } - - this.hide_toolbar_artifacts(); - + // 1. create placeholder artifact var w=300,h=150; var fill="transparent"; @@ -2578,12 +2569,11 @@ var SpacedeckSections = { }, hide_toolbar_props: function() { - this.toolbar_props_in = false; + // FIXME test + //this.toolbar_props_in = false; }, show_toolbar_artifacts: function(x,y) { - this.toolbar_artifacts_x = (x-175)+"px"; - this.toolbar_artifacts_y = y+"px"; this.toolbar_artifacts_in = true; }, @@ -2593,29 +2583,19 @@ var SpacedeckSections = { start_adding_artifact: function(evt) { evt = fixup_touches(evt); - - // toggle - if (this.toolbar_artifacts_in) { - this.hide_toolbar_artifacts(); - return; - } - this.show_toolbar_artifacts(evt.pageX,evt.pageY); }, start_drawing_scribble: function(evt) { - this.hide_toolbar_artifacts(); this.active_tool = "scribble"; this.opened_dialog = "none"; }, start_drawing_arrow: function(evt) { - this.hide_toolbar_artifacts(); this.active_tool = "arrow"; this.opened_dialog = "none"; }, start_drawing_line: function(evt) { - this.hide_toolbar_artifacts(); this.active_tool = "line"; this.opened_dialog = "none"; }, diff --git a/public/javascripts/spacedeck_spaces.js b/public/javascripts/spacedeck_spaces.js index 8e39893..71778d7 100644 --- a/public/javascripts/spacedeck_spaces.js +++ b/public/javascripts/spacedeck_spaces.js @@ -273,9 +273,9 @@ var SpacedeckSpaces = { this.discover_zones(); - //window.setTimeout(function() { - // this.zoom_to_fit(); - //}.bind(this),10); + window.setTimeout(function() { + this.zoom_to_fit(); + }.bind(this),10); if (on_success) { on_success(); @@ -876,10 +876,6 @@ var SpacedeckSpaces = { }.bind(this)); }, - emojified_comment: function(comment) { - return twemoji.parse(comment); - }, - set_folder_sorting: function(key,reverse) { this.folder_sorting = key; this.folder_reverse = reverse?-1:1; diff --git a/public/javascripts/spacedeck_whiteboard.js b/public/javascripts/spacedeck_whiteboard.js index 9bdb4ec..1586fc3 100644 --- a/public/javascripts/spacedeck_whiteboard.js +++ b/public/javascripts/spacedeck_whiteboard.js @@ -80,10 +80,16 @@ function setup_whiteboard_directives() { evt.stopPropagation(); } - var a = $scope.find_artifact_by_id(evt.currentTarget.id.replace("artifact-","")); - if ($scope.active_tool == "zoom") return; + if (evt.which == 2) { + // middle mouse button + this.handle_mouse_down_space(evt); + return; + } + + var a = $scope.find_artifact_by_id(evt.currentTarget.id.replace("artifact-","")); + if ($scope.active_tool == "eyedrop") { var arts = $scope.selected_artifacts(); if (!$scope.is_selected(a) && arts.length > 0) { @@ -196,8 +202,10 @@ function setup_whiteboard_directives() { }, handle_mouse_down_space: function(evt) { - if (evt.target != evt.currentTarget && !_.include(["wrapper"],evt.target.className)) return; - + if (evt.which != 2) { + if (evt.target != evt.currentTarget && !_.include(["wrapper"],evt.target.className)) return; + } + var $scope = this.vm.$root; $scope.opened_dialog="none"; @@ -214,7 +222,7 @@ function setup_whiteboard_directives() { this.deselect(); this.mouse_state = "transform"; $scope.mouse_state = this.mouse_state; - this.start_adding_note(evt); + this.start_drawing_note(evt); return; } else if ($scope.active_tool=="arrow") { @@ -492,6 +500,7 @@ function setup_whiteboard_directives() { if (!xdists[0] || xdists[0][0]>TOL) { results.snapx = [0,x]; // distance, coordinate } else { + // FIXME snap rulers are broken //$scope.snap_ruler_x = xdists[0][1]; } if (!ydists[0] || ydists[0][0]>TOL) { @@ -516,6 +525,41 @@ function setup_whiteboard_directives() { return point; }, + start_drawing_note: function(evt) { + evt.preventDefault(); + evt.stopPropagation(); + + var $scope = this.vm.$root; + var point = this.cursor_point_to_space(evt); + this.offset_point_in_wrapper(point); + var z = $scope.highest_z()+1; + + var a = { + space_id: $scope.active_space._id, + mime: "text/html", + description: "

Text

", + x: point.x, + y: point.y, + z: z, + w: 64, + h: 64, + align: "center", + valign: "middle", + stroke_color: "#000000", + fill_color: "rgb(241, 196, 15)", + stroke: 0 + }; + + $scope.save_artifact(a, function(saved_a) { + $scope.update_board_artifact_viewmodel(saved_a); + $scope.active_space_artifacts.push(saved_a); + $scope.select(evt,a); + $scope.transform_ox = 0; + $scope.transform_oy = 0; + $scope.begin_transaction(); + }.bind(this)); + }, + start_drawing_scribble: function(evt) { evt.preventDefault(); evt.stopPropagation(); @@ -851,7 +895,7 @@ function setup_whiteboard_directives() { var scale_x = lead_x ? (moved_x)/lead_x : 1; var scale_y = lead_y ? (moved_y)/lead_y : 1; - if (!$scope.transform_lock) scale_y = scale_x; + if ($scope.transform_lock) scale_y = scale_x; $scope.update_selected_artifacts(function(a) { var old_a = $scope.find_artifact_before_transaction(a); diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index aea59db..6d40a5b 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1995,11 +1995,6 @@ content: "\E275"; } /*! normalize.css v3.0.0 | MIT License | git.io/normalize */ -html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; } - body { margin: 0; } @@ -2692,7 +2687,7 @@ body { color: #888; font-weight: 300; font-weight: 400; - font-family: Avenir W01, sans-serif; + font-family: Inter, sans-serif; font-weight: 300; font-size: 15px; line-height: 1.6; } @@ -2842,8 +2837,8 @@ select { max-width: 100%; vertical-align: middle; font-weight: 300; - font-family: Avenir W01; - font-size: 18px; + font-family: Inter; + font-size: 12pt; line-height: normal; color: #222; background-color: rgba(0, 0, 0, 0.01); @@ -2885,23 +2880,17 @@ select { padding-left: 0 !important; } .input.input-white { background-color: white; - color: #888; box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.05), inset 0 0px 4px rgba(0, 0, 0, 0.1); } .input.input-light { - background-color: #f5f5f5; - color: #888; } + background-color: #f5f5f5; } .input.input-dark { - background-color: #292929; - color: #888; } + background-color: #292929; } .input.input-lighten { - background-color: rgba(255, 255, 255, 0.05); - color: #888 !important; } + background-color: rgba(255, 255, 255, 0.05); } .input.input-darken { - background-color: rgba(0, 0, 0, 0.05); - color: #888; } + background-color: rgba(0, 0, 0, 0.05); } .input.input-transparent { - background-color: transparent; - color: #888; } + background-color: transparent; } .input:focus { outline: 0; } .input:-moz-placeholder { @@ -3296,7 +3285,7 @@ form .alert { font-size: 13px; line-height: 1; color: #222; - font-family: Avenir W01; + font-family: Inter; width: 100%; white-space: nowrap; } .label.label-sm { @@ -3358,7 +3347,7 @@ form .alert { padding-left: 20px; max-width: 100%; font-weight: 300; - font-family: Avenir W01; + font-family: Inter; font-size: 22px; line-height: 60px; color: #888; @@ -5390,7 +5379,6 @@ form .alert { line-height: 1.5; width: 100%; text-align: left; - color: #888; font-weight: normal; cursor: pointer; border-radius: 3px; @@ -5678,18 +5666,13 @@ output { letter-spacing: 0.1em; } .input-select { + background-color: rgba(255, 255, 255, 0.04); + background-image: url("images/select_arrow.gif"); border-radius: 3px; display: inline-block; width: 100%; } -@-moz-document url-prefix() { - select.input { - background-repeat: no-repeat; - background-position: right center; - cursor: pointer; } } - select { - -webkit-appearance: none; appearance: none; padding-left: 0px; width: 100%; } @@ -5699,8 +5682,9 @@ select { .table { width: 100%; - color: #888; - font-family: Avenir W01; } + font-family: Inter; + border-radius: 3px; + border: 2px solid rgba(0, 0, 0, 0.0125); } .table thead > tr > th:first-child, .table tbody > tr > th:first-child, @@ -5784,7 +5768,7 @@ select { height: 60px; width: 60px; display: inline-block; - font-family: Avenir W01; + font-family: Inter; font-size: 30px; font-size: 25px; line-height: 60px; @@ -7948,14 +7932,14 @@ select { background-size: cover; background-position: center; border-radius: 3px; - font-family: Avenir W01; + font-family: Inter; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; background-color: #f5f5f5; - color: #888; + color: #111; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -7973,12 +7957,6 @@ select { .btn.btn-link { background-color: transparent; color: #888; } - .btn.facebook { - background-color: #3e5b97 !important; - color: white !important; } - .btn.twitter { - background-color: #2aa7de !important; - color: white !important; } .btn.btn-round { border-radius: 100px !important; } .btn.btn-rounded { @@ -7986,22 +7964,21 @@ select { .btn.btn-nude { min-width: 0 !important; padding: 0 !important; - background-color: transparent; - color: #888; } + background-color: transparent; } .btn.btn-nude + .btn-nude:before { content: "·"; margin: 0 3px; color: rgba(0, 0, 0, 0.3); } .btn.btn-stroke { box-shadow: inset 0 0 0 1px #222; - color: #222 !important; + color: #111; background-color: transparent; } .btn.btn-stroke:active { box-shadow: inset 0 0 0 1px white; color: white !important; } .btn.btn-stroke-darken { - border: 1px solid rgba(0, 0, 0, 0.1); - color: #888; + border: 1px solid #111; + color: #111; background-color: transparent; } .btn.btn-stroke-darken:active { border: 1px solid #222; @@ -8084,11 +8061,14 @@ select { pointer-events: none; } .btn.btn-transparent { background-color: transparent; - color: #888; } + color: #222; } .btn.btn-transparent.active { - color: #292929 !important; } + color: #ffffff; + background-color: #111; } .btn.btn-transparent.open { - color: white !important; } + color: #ffffff; + background-color: #111; + border-radius: 0; } .btn.btn-transparent-medium { background-color: transparent; color: #888; } @@ -8326,7 +8306,7 @@ select { position: absolute; top: 100%; left: 0; - font-size: 18px; + font-size: 12pt; color: #888; margin-top: 10px; } .btn.btn-social { @@ -8546,7 +8526,6 @@ select { .btn-cluster .icon:after, .btn-cluster .icon:before { width: 100%; } .btn-cluster > * { - border-radius: 0 !important; background-clip: padding-box; width: 100%; float: left; } @@ -8599,9 +8578,6 @@ select { transform: scale(1, 1); } .btn-circle .btn-group { - -webkit-transform: scale(0, 0); - -ms-transform: scale(0, 0); - transform: scale(0, 0); position: absolute; top: -100%; left: -100%; @@ -8610,9 +8586,6 @@ select { font-size: 0px; margin-left: -12px; } .btn-circle .btn-group .btn { - -webkit-transform: scale(0, 0); - -ms-transform: scale(0, 0); - transform: scale(0, 0); margin: 0 4px; } .btn-circle .btn-group .btn:first-child { margin-left: 17.35%; } @@ -8877,30 +8850,6 @@ select { border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; } -.btn-group.bottom-left > .btn { - border-radius: 0px; } - .btn-group.bottom-left > .btn:first-child { - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; } - .btn-group.bottom-left > .btn.last, .btn-group.bottom-left > .btn:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 0px; } - -.btn-xyz { - position: relative; - display: inline-block; - line-height: 0px; - padding: 0px; - font-size: 0px; - vertical-align: middle; - white-space: nowrap; - min-height: 44px; } - .btn-xyz:before, .btn-xyz:after { - content: " "; - display: table; } - .btn-xyz:after { - clear: both; } - .btn-group { position: relative; display: inline-block; @@ -8908,13 +8857,15 @@ select { padding: 0px; font-size: 0px; vertical-align: middle; - white-space: nowrap; } + white-space: nowrap; + border: 1px solid #222; + border-radius: 5px; } .btn-group.dark { border-radius: 3px; background-color: #222; - color: #989898; } + color: #ffffff; } .btn-group.dark .btn { - color: #989898; } + color: #ffffff; } .btn-group.lighten { background-color: rgba(255, 255, 255, 0.3); color: #888; } @@ -9049,10 +9000,9 @@ select { transform: translateY(1%); } .contained-dropdown .overflow-y-scroll ul li span { text-align: center; - font-size: 18px; - line-height: 24px; } + font-size: 12pt; + line-height: 1.5em; } .contained-dropdown.hover:hover, .contained-dropdown.open { - background-color: #222; background-color: #f5f5f5; } .contained-dropdown.hover:hover > *, .contained-dropdown.open > * { opacity: 1; } @@ -9127,8 +9077,7 @@ select { color: #888; } .dropdown.light > .dropdown-menu, .dropdown.light > .dialog { - background: #f5f5f5; - color: #888; } + background: white; } .dropdown > .dropdown-menu { box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1); -webkit-backface-visibility: hidden; @@ -9178,80 +9127,37 @@ select { filter: alpha(opacity=100); pointer-events: auto !important; display: block; } - .dropdown.center.hover:hover > .dialog, - .dropdown.center.hover:hover > .dropdown-menu, .dropdown.center.open > .dialog, - .dropdown.center.open > .dropdown-menu { - -webkit-transform: translate3d(-50%, -50%, 100px) scale(1); - -ms-transform: translate3d(-50%, -50%, 100px) scale(1); - transform: translate3d(-50%, -50%, 100px) scale(1); } .dropdown.center > .dialog, .dropdown.center > .dropdown-menu { left: 50%; top: 50%; - margin-top: 0px; - -webkit-transform-origin: center center; - -moz-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; - -webkit-transform: translate3d(-50%, -50%, 100px) scale(0.93, 0.8); - -ms-transform: translate3d(-50%, -50%, 100px) scale(0.93, 0.8); - transform: translate3d(-50%, -50%, 100px) scale(0.93, 0.8); } + margin-top: 0px; } .dropdown.bottomleft > .dialog, .dropdown.bottomleft > .dropdown-menu { top: auto; bottom: 100%; - margin-bottom: 16px; - -webkit-transform-origin: bottom left; - -moz-transform-origin: bottom left; - -ms-transform-origin: bottom left; - transform-origin: bottom left; - -webkit-transform: translate3d(-33%, 0%, 100px) scale(0.93, 0.8); - -ms-transform: translate3d(-33%, 0%, 100px) scale(0.93, 0.8); - transform: translate3d(-33%, 0%, 100px) scale(0.93, 0.8); } + margin-bottom: 16px; } .dropdown.bottom > .dialog, .dropdown.bottom > .dropdown-menu { top: auto; bottom: 100%; - margin-bottom: 16px; - -webkit-transform-origin: bottom center; - -moz-transform-origin: bottom center; - -ms-transform-origin: bottom center; - transform-origin: bottom center; - -webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93, 0.8); - -ms-transform: translate3d(-50%, 0%, 100px) scale(0.93, 0.8); - transform: translate3d(-50%, 0%, 100px) scale(0.93, 0.8); } + margin-bottom: 16px; } .dropdown.top > .dialog, .dropdown.top > .dropdown-menu { top: 100%; bottom: auto; - margin-top: -16px; - -webkit-transform-origin: top center; - -moz-transform-origin: top center; - -ms-transform-origin: top center; - transform-origin: top center; - -webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93, 0.8); - -ms-transform: translate3d(-50%, 0%, 100px) scale(0.93, 0.8); - transform: translate3d(-50%, 0%, 100px) scale(0.93, 0.8); } + margin-top: -16px; } + .dropdown.top.left > .dialog, + .dropdown.top.left > .dropdown-menu { + left: 70px; + margin-top: -60px; } .dropdown.top.right > .dialog, .dropdown.top.right > .dropdown-menu { top: 100%; bottom: auto; left: auto; - right: 0; - margin-top: 16px; - -webkit-transform-origin: top right; - -moz-transform-origin: top right; - -ms-transform-origin: top right; - transform-origin: top right; - -webkit-transform: translate3d(0%, 0%, 100px) scale(0.93, 0.8); - -ms-transform: translate3d(0%, 0%, 100px) scale(0.93, 0.8); - transform: translate3d(0%, 0%, 100px) scale(0.93, 0.8); } - .dropdown.top.right.hover:hover > .dialog, - .dropdown.top.right.hover:hover > .dropdown-menu, .dropdown.top.right.open > .dialog, - .dropdown.top.right.open > .dropdown-menu { - -webkit-transform: translate3d(0%, 0%, 100px) scale(1); - -ms-transform: translate3d(0%, 0%, 100px) scale(1); - transform: translate3d(0%, 0%, 100px) scale(1); } + right: 70px; + margin-top: -60px; } .dropdown.top, .dropdown.bottom, .dropdown.bottomleft { /*&.open > .btn-group > .btn-icon-labeled:hover, &.open > .btn-icon-labeled:hover { @@ -9267,81 +9173,56 @@ select { .dropdown.bottomleft.open > .btn-group > .btn-dark .jewel { background-color: #fff !important; border-color: #303030 !important; } - .dropdown.top.hover:hover > .dialog, - .dropdown.top.hover:hover > .dropdown-menu, .dropdown.top.open > .dialog, - .dropdown.top.open > .dropdown-menu, .dropdown.bottom.hover:hover > .dialog, - .dropdown.bottom.hover:hover > .dropdown-menu, .dropdown.bottom.open > .dialog, - .dropdown.bottom.open > .dropdown-menu, .dropdown.bottomleft.hover:hover > .dialog, - .dropdown.bottomleft.hover:hover > .dropdown-menu, .dropdown.bottomleft.open > .dialog, - .dropdown.bottomleft.open > .dropdown-menu { - -webkit-transform: translate3d(-50%, 0%, 100px) scale(1); - -ms-transform: translate3d(-50%, 0%, 100px) scale(1); - transform: translate3d(-50%, 0%, 100px) scale(1); } - .dropdown.bottomleft.hover:hover > .dialog, - .dropdown.bottomleft.hover:hover > .dropdown-menu, .dropdown.bottomleft.open > .dialog, - .dropdown.bottomleft.open > .dropdown-menu { - -webkit-transform: translate3d(-33%, 0%, 100px) scale(1) !important; - -ms-transform: translate3d(-33%, 0%, 100px) scale(1) !important; - transform: translate3d(-33%, 0%, 100px) scale(1) !important; } -.dropdown.options-3.option-1:after { - margin-left: -68px; } +.dropdown { + /*&.options-3 { + &.option-1:after { margin-left: -68px;} + &.option-2:after { margin-left: -8px;} + &.option-3:after { margin-left: 52px;} + } -.dropdown.options-3.option-2:after { - margin-left: -8px; } + &.option-1:after { margin-left: -38px;} + &.option-2:after { margin-left: 22px;} + + &.open:after { + @include transition( all 0.1s ease-in-out 0s); + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + }*/ + /* + &:after { + @include transition( all 0.1s ease-in-out 0s); + content: ""; + position: absolute; + bottom: 100%; + width: 0; + height: 0; + // margin-bottom: 8px; -.dropdown.options-3.option-3:after { - margin-left: 52px; } + margin-left: -8px; + pointer-events: none !important; + left: 50%; + //transform: scale(0,0); + } -.dropdown.option-1:after { - margin-left: -38px; } - -.dropdown.option-2:after { - margin-left: 22px; } - -.dropdown.open:after { - -webkit-transition: all 0.1s ease-in-out 0s; - transition: all 0.1s ease-in-out 0s; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); } - -.dropdown:after { - -webkit-transition: all 0.1s ease-in-out 0s; - transition: all 0.1s ease-in-out 0s; - content: ""; - position: absolute; - bottom: 100%; - width: 0; - height: 0; - margin-left: -8px; - pointer-events: none !important; - left: 50%; - -webkit-transform: scale(0, 0); - -ms-transform: scale(0, 0); - transform: scale(0, 0); } - -.dropdown.bottom:after, .dropdown.bottomleft:after { - -webkit-transform-origin: bottom center; - -moz-transform-origin: bottom center; - -ms-transform-origin: bottom center; - transform-origin: bottom center; - bottom: 100%; - border-bottom: 8px solid transparent; - border-right: 8px solid transparent; - border-top: 8px solid #303030; - border-left: 8px solid transparent; } - -.dropdown.top:after { - -webkit-transform-origin: top center; - -moz-transform-origin: top center; - -ms-transform-origin: top center; - transform-origin: top center; - top: 100%; - border-bottom: 8px solid #303030; - border-right: 8px solid transparent; - border-top: 8px solid transparent; - border-left: 8px solid transparent; } + &.bottom:after, &.bottomleft:after { + //@include transform-origin(bottom center); + bottom: 100%; + border-bottom: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid #303030; + border-left: 8px solid transparent; + } +*/ + /*&.top:after { + @include transform-origin(top center); + top: 100%; + border-bottom: 8px solid #303030; + border-right: 8px solid transparent; + border-top: 8px solid transparent; + border-left: 8px solid transparent; + }*/ } .separate .icon { display: block; } @@ -9438,7 +9319,7 @@ select { transition: all 0.125s ease-in-out; pointer-events: none; background-color: #f5f5f5; - color: #888; + color: #222; border-radius: 9px; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1); } .dialog ol, .dialog ul, .dialog p { @@ -9560,7 +9441,7 @@ select { .overflow-x-scroll ::-webkit-scrollbar, .overflow-y-scroll::-webkit-scrollbar-corner, .overflow-y-scroll ::-webkit-scrollbar { - background-color: transparent; } + background-color: rgba(0, 0, 0, 0); } .overflow-scroll::-webkit-scrollbar-thumb, .overflow-hidden::-webkit-scrollbar-thumb, .overflow-x-scroll::-webkit-scrollbar-thumb, @@ -9723,8 +9604,8 @@ button.close { -ms-transform: scale(1, 1); transform: scale(1, 1); } .modal .close { - position: fixed; - margin: 44px 44px; } + margin-left: 44px; + margin-bottom: 44px; } .modal .close .icon { display: block; } .modal figure { @@ -9794,8 +9675,7 @@ button.close { .modal-header { padding: 30px 40px; - position: relative; - color: #888; } + position: relative; } .close-search { position: fixed; @@ -10010,7 +9890,7 @@ button.close { color: #888; } .select-list { - -webkit-mask-image: -webkit-gradient(linear, left top, left 15px, from(transparent), to(rgba(0, 0, 0, 0.5))); + -webkit-mask-image: -webkit-gradient(linear, left top, left 15px, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5))); background-clip: padding-box; font-size: 15px; line-height: 14px; @@ -10188,26 +10068,14 @@ button.close { margin-left: -20px; } .header-left { - -webkit-transform-origin: center left; - -moz-transform-origin: center left; - -ms-transform-origin: center left; - transform-origin: center left; left: 0; padding-left: 10px; } .header-right { - -webkit-transform-origin: center right; - -moz-transform-origin: center right; - -ms-transform-origin: center right; - transform-origin: center right; right: 0; - padding-right: 10px; } + padding-right: 20px; } .header-center { - -webkit-transform-origin: center center; - -moz-transform-origin: center center; - -ms-transform-origin: center center; - transform-origin: center center; width: 100%; left: 0; right: 0; @@ -10239,7 +10107,7 @@ button.close { margin: 0; height: 60px; line-height: 60px; - font-size: 13.5px; + font-size: 9pt; font-weight: bold; color: #888; display: inline-block; @@ -10450,7 +10318,7 @@ button.close { margin-right: 3px; color: #888; text-transform: uppercase; - font-family: Avenir W01; + font-family: Inter; font-size: 11px; opacity: 0.5; } #profile-details ul li:hover { @@ -12482,7 +12350,7 @@ button.close { .avatar { background-color: #3d9ee9; - font-family: Avenir W01; + font-family: Inter; color: white; display: inline-block; height: 30px; @@ -12579,8 +12447,8 @@ button.close { min-height: 0; } #folder-empty > div p { border-radius: 100px; - font-size: 18px; - line-height: 24px; + font-size: 12pt; + line-height: 1.5em; display: block; color: #888; } @@ -12760,7 +12628,7 @@ button.close { background-color: #292929; position: absolute; bottom: 2px; - -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.1))); + -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.1))); background-color: black; pointer-events: none; } #folder-grid .item.favorite .fav-toggle { @@ -12950,7 +12818,7 @@ button.close { right: 40px; color: #888; font-size: 11px; - font-family: Avenir W01; + font-family: Inter; text-align: left; } #editors, #editors-list { @@ -13038,7 +12906,7 @@ button.close { .editor > a .editor-name, .editor > span .editor-email, .editor > span .editor-name { - font-family: Avenir W01; + font-family: Inter; font-size: 13px; line-height: 1.4; display: block; @@ -13424,22 +13292,12 @@ button.close { .toolbar { margin: auto; position: fixed; - bottom: 0px; + top: 10px; z-index: 3000; - padding: 20px; + padding: 0; font-size: 0; line-height: 0; - transition-duration: 0.15s; - transition-timing-function: ease-in-out; - transition-delay: initial; - transition-property: opacity, transform; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - pointer-events: none !important; - opacity: 0; } + pointer-events: none !important; } .toolbar.toolbar-meta { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); @@ -13452,28 +13310,8 @@ button.close { top: auto !important; left: 0 !important; bottom: 0 !important; } - .toolbar.out { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); } - .toolbar.out * { - pointer-events: none !important; } - .toolbar.out button, .toolbar.out input, .toolbar.out .dialog { - display: none; } - .toolbar.in { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - .toolbar.in.out { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); } - .toolbar.in.out * { - pointer-events: none !important; } .toolbar > * { - margin: 0 2px; - margin-top: 4px; pointer-events: auto !important; } - .toolbar > *.out { - margin: 0; - opacity: 0; } .toolbar.toolbar-vertical { width: auto !important; font-size: 0px; @@ -13588,16 +13426,14 @@ button.close { position: relative; } .toolbar-properties { - bottom: 64px; z-index: 0; } .toolbar-properties.in { z-index: 3000; } .toolbar-properties .icon-sm { z-index: 110; - background-color: #222; border-radius: 50px; } .toolbar-properties .jewel { - border: 2px solid rgba(255, 255, 255, 0.5); + border: 2px solid #888; background-color: transparent; color: #989898; width: 36px; @@ -13616,7 +13452,13 @@ button.close { .toolbar-elements > .btn-group, .toolbar-properties > .btn-group { - box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } + background-color: #ffffff; } + +.toolbar-elements { + left: 10px; } + +.toolbar-properties { + right: 20px; } #color-toggles { background-size: 40px; @@ -14638,7 +14480,7 @@ button.close { padding-top: 10px; margin-bottom: 0; font-size: 16px !important; - font-family: Avenir W01 !important; + font-family: Inter !important; list-style: none; border-top-left-radius: 3px; border-top-right-radius: 3px; } @@ -14784,12 +14626,9 @@ button.close { max-width: 100%; max-height: 100%; position: relative; - overflow: scroll; - /** { - -moz-user-select: none !important; // firefox has selection problems - }*/ } + overflow: scroll; } .board .wrapper { - border: 1px dotted rgba(128, 128, 128, 0.5); + border: 4px solid black; transition-duration: 0.25s; transition-property: width, height, background-color; background-repeat: no-repeat; @@ -14798,20 +14637,20 @@ button.close { .snap-ruler-h { pointer-events: none; position: fixed; - z-index: 0; + z-index: 2000; right: 0px; height: 1px; - background-color: rgba(0, 0, 0, 0.5); + background-color: black; left: 0px; } .snap-ruler-v { pointer-events: none; position: fixed; - z-index: 0; + z-index: 2000; top: 0px; bottom: 0px; width: 1px; - background-color: rgba(0, 0, 0, 0.5); } + background-color: black; } .cursor { position: absolute; @@ -14842,16 +14681,16 @@ button.close { max-width: 100%; position: relative; width: auto; - margin-left: -18px; - margin-right: -18px; - margin-top: -18px; - margin-bottom: -18px; } + margin-left: -12pt; + margin-right: -12pt; + margin-top: -12pt; + margin-bottom: -12pt; } .table table { width: 100%; table-layout: auto; border-collapse: separate; - border-spacing: 18px 18px; } + border-spacing: 12pt 12pt; } .table tr { border-top: 1px solid rgba(255, 255, 255, 0.125); } @@ -14866,26 +14705,10 @@ button.close { position: absolute; } #space { - /*-webkit-user-select: all; - -ms-user-select: all; - -moz-user-select: all; - user-select: all;*/ position: relative; height: 100% !important; background-color: #eee; } -#made-with { - position: fixed; - width: 100%; - bottom: 0; - padding: 12px; - opacity: 0.25; } - #made-with a { - color: #222; } - #made-with p { - text-align: center; - font-size: 11px; } - #baseline { position: absolute; width: 100%; @@ -14898,7 +14721,7 @@ button.close { top: 0; display: none; } #baseline li { - height: 6px; + height: 0.375em; border-bottom: 1px solid #3d9ee9; } #space-header .item-meta { @@ -14921,8 +14744,8 @@ button.close { .space-bounds { position: absolute; - left: 0px; - top: 0px; + left: 0; + top: 0; pointer-events: none; background-size: cover; background-repeat: no-repeat; @@ -15186,7 +15009,7 @@ button.close { top: 60px; width: 100%; height: 100%; - background-color: transparent; + background-color: rgba(0, 0, 0, 0); pointer-events: none; } #sidebar .sidebar-menu-backdrop.in { pointer-events: auto; @@ -15195,20 +15018,15 @@ button.close { padding: 15px 25px; font-size: 14px; } #sidebar #search-input:-moz-placeholder, #sidebar #search-input::-moz-placeholder, #sidebar #search-input:-ms-input-placeholder { - font-family: Avenir W01; } + font-family: Inter; } #sidebar #search-input::-webkit-input-placeholder { - font-family: Avenir W01; } + font-family: Inter; } #sidebar #online-members > div:not(.in) { display: none; } .artifact { position: relative; - /*&.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after { - content: "Double click to edit"; - opacity: 0.25; - } - - &.artifact-text.text-blank [contentEditable=true].text-editing p:first-child::after { + /*&.artifact-text.text-blank [contentEditable=true].text-editing p:first-child::after { content: "Type here"; opacity: 0.25; }*/ @@ -15235,6 +15053,9 @@ button.close { top: 50%; left: 50%; margin: -22px; } + .artifact.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after { + content: "Double click to edit"; + opacity: 0.25; } .artifact.artifact-text.text-blank p:first-child br { display: none; } .artifact .link-wrapper { @@ -15282,9 +15103,9 @@ button.close { display: block; word-wrap: break-word; line-height: 1.5em; - font-size: 18px; } + font-size: 12pt; } .artifact .text-table .text-cell .text-column.text-editing { - min-height: 18px; + min-height: 12pt; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; @@ -15550,7 +15371,7 @@ button.close { position: absolute; color: black; white-space: normal; - font-size: 18px; } + font-size: 36px; } .board .artifact.artifact-zone { border: 1px solid #2ecc71; background-color: rgba(46, 204, 113, 0.025); @@ -15600,6 +15421,9 @@ body:not(.present-mode) #space .artifact.selected { .tool-pan { cursor: grab !important; } +.tool-note { + cursor: crosshair !important; } + .artifact.state-idle .progress, .artifact.state-idle .progress-text { display: none; } @@ -15692,30 +15516,30 @@ body:not(.present-mode) #space .artifact.selected { display: block; } .handles { - border: 1px solid rgba(255, 255, 255, 0.5); position: absolute; left: 0; top: 0; - bottom: 0; + bottom: -1; right: 0; z-index: 800; - pointer-events: none; } + pointer-events: none; + background: rgba(255, 255, 255, 0.1); } .handles:after { - border: 1px dotted #288cd7; + border: 4px dotted #000000; content: ""; display: block; position: absolute; height: auto; width: auto; - top: -1px; - left: -1px; - right: -1px; + top: 0px; + left: 0px; + right: 0px; bottom: -1px; } .extreme-zoom .handles { border: 8px solid rgba(255, 255, 255, 0.5); } .extreme-zoom .handles:after { - border: 8px dotted #288cd7; + border: 8px dotted #000000; top: -4px; left: -4px; right: -4px; @@ -16049,13 +15873,12 @@ body:not(.present-mode) #space .artifact.selected { pointer-events: auto; z-index: 2000; position: absolute; - width: 30px !important; - height: 30px !important; border-radius: 100%; - margin: -15px; - border: 1px solid rgba(0, 0, 0, 0.25); } + border: 1px solid black; + margin: -5px; + padding: 4px; } .vector-handle:hover { - background-color: rgba(255, 255, 255, 0.5); + background-color: black; cursor: move; } .handles-vector .handle, .handles-vector .edge-handle { @@ -16152,13 +15975,7 @@ body:not(.present-mode) #space .artifact.selected { border-style: solid; border-width: 10px; border-color: transparent; - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; background-clip: padding-box; - -webkit-transition: all .05s ease-in-out; - -moz-transition: all .05s ease-in-out; - -ms-transition: all .05s ease-in-out; - -o-transition: all .05s ease-in-out; transition: all .05s ease-in-out; } .handle div { position: relative; @@ -16421,10 +16238,8 @@ body:not(.present-mode) #space .artifact.selected { html, body { height: 100%; - -webkit-tap-highlight-color: transparent; - background-color: white; background-color: #f5f5f5; - color: #292929; } + color: #111; } *[contenteditable="true"] { outline: none; } @@ -16442,49 +16257,18 @@ body { text-rendering: optimizeLegibility; cursor: default; } +#home { + background-color: white; } + .img img { max-width: 100%; height: auto; } -.plan { - color: #888; - border-radius: 3px; - display: inline-block; - padding: 30px; - background-color: transparent; - border: 2px solid rgba(0, 0, 0, 0.05); - width: 100%; } - .plan.active { - background-color: white; - border: none; } - .plan h4 { - color: black; - margin-bottom: 0px; } - .plan p { - font-size: 13px; - line-height: 1.4; - margin-top: 5px; - margin-bottom: 5px; } - .plan ul { - list-style: none; - font-size: 10px; - margin: 0px; - padding: 0px; - border-top: 2px solid rgba(0, 0, 0, 0.05); - padding-top: 20px; - margin-top: 20px; - margin-bottom: 20px; } - .plan ul li { - padding-top: 2px; } - #startup { background-position: center; background-image: url(/images/diamond.svg); background-repeat: no-repeat; } -#home { - background-color: white; } - .layer { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; diff --git a/routes/api/space_exports.js b/routes/api/space_exports.js index 0083feb..aed5d6c 100644 --- a/routes/api/space_exports.js +++ b/routes/api/space_exports.js @@ -78,14 +78,14 @@ router.get('/png', function(req, res, next) { var oldPath = url.parse(oldUrl).pathname; uploader.removeFile(oldPath, function(err, res) {}); } - fs.unlink(local_path); + fs.unlinkSync(local_path); } catch (e) { console.error(e); } }); try { - fs.unlink(localResizedFilePath); + fs.unlinkSync(localResizedFilePath); } catch (e) { console.error(e); } diff --git a/routes/api/space_memberships.js b/routes/api/space_memberships.js index 2b88dfa..cd0f23e 100644 --- a/routes/api/space_memberships.js +++ b/routes/api/space_memberships.js @@ -84,7 +84,7 @@ router.post('/', function(req, res, next) { } else { res.status(400).json({ - "error": "user already in space" + "error": "This email is already included in the Space memberships." }); } diff --git a/styles/artifact.scss b/styles/artifact.scss index 2596466..bfff1c2 100644 --- a/styles/artifact.scss +++ b/styles/artifact.scss @@ -26,12 +26,12 @@ } } - /*&.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after { + &.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after { content: "Double click to edit"; opacity: 0.25; } - &.artifact-text.text-blank [contentEditable=true].text-editing p:first-child::after { + /*&.artifact-text.text-blank [contentEditable=true].text-editing p:first-child::after { content: "Type here"; opacity: 0.25; }*/ @@ -469,7 +469,7 @@ color: black; //@include user-select(none); white-space: normal; - font-size: 18px; + font-size: 36px; &.artifact-zone { border: 1px solid rgba(46,204,113,1); @@ -553,6 +553,10 @@ body:not(.present-mode) { cursor: grab !important; } +.tool-note { + cursor: crosshair !important; +} + .artifact.state-idle { .progress, .progress-text { display: none; diff --git a/styles/button.scss b/styles/button.scss index 26bd125..f9c2c0e 100644 --- a/styles/button.scss +++ b/styles/button.scss @@ -7,12 +7,6 @@ .btn-group.colors { .btn { - // padding: 4px; - // background-clip: content-box; - // padding-right: 2px; - // &:last-child { - // padding-right: 4px; - // } box-shadow: inset 0 0 30px 0px rgba(40,40,40,0.1); } } @@ -64,7 +58,7 @@ backface-visibility: hidden; cursor: pointer; background-color: $light; - color: $medium;; + color: $black; @include user-select(none); &:last-child {border: none;} @@ -82,12 +76,9 @@ &.btn-link { background-color: transparent; - color: $medium;; + color: $medium; } - &.facebook {background-color: $facebook !important; color: white !important;} - &.twitter {background-color: $twitter !important; color: white !important; } - &.btn-round { border-radius: 100px !important; } @@ -96,21 +87,10 @@ border-radius: 6px !important; } - // &.close { - // position: absolute; - // top: 15px; - // right: 15px; - // z-index: 4000; - // font-size: 40px; - // } - &.btn-nude { min-width: 0 !important; - // font-size: inherit !important; padding: 0 !important; - // height: auto !important; background-color: transparent; - color: $medium; } &.btn-nude + .btn-nude { @@ -123,7 +103,7 @@ &.btn-stroke { box-shadow: inset 0 0 0 1px $dark; - color: $dark !important; + color: $black; background-color: transparent; &:active { box-shadow: inset 0 0 0 1px white; @@ -132,9 +112,8 @@ } &.btn-stroke-darken { - //box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); - border: 1px solid rgba(0,0,0,0.1); - color: $medium; + border: 1px solid $black; + color: $black; background-color: transparent; &:active { //box-shadow: inset 0 0 0 1px $dark; @@ -263,9 +242,18 @@ &.btn-transparent { background-color: transparent; - color: $medium; - &.active {color: $darker !important; } - &.open {color: white !important; } + color: $dark; + &.active { + //color: $black !important; + color: $white; + background-color: $black; + } + &.open { + //color: $black !important; + color: $white; + background-color: $black; + border-radius: 0; + } } &.btn-transparent-medium { @@ -714,7 +702,6 @@ } > * { - border-radius: 0 !important; background-clip: padding-box; width: 100%; float: left; @@ -775,7 +762,7 @@ } } .btn-group { - @include scale(0,0); + //@include scale(0,0); //@include transition( all 0.1s 0s ease-in-out); position: absolute; @@ -787,7 +774,7 @@ margin-left: -12px; .btn { - @include scale(0,0); + //@include scale(0,0); //@include transition( all 0.1s 0.05s ease-in-out); @@ -979,31 +966,7 @@ } } -.btn-group.bottom-left > .btn { - border-radius: 0px; - - &:first-child{ - border-top-left-radius: 0px; - border-bottom-left-radius: 0px; - } - &.last, - &:last-child{ - border-top-right-radius: 3px; - border-bottom-right-radius: 0px; - } -} - -.btn-xyz { - position: relative; - display: inline-block; - line-height: 0px; - padding: 0px; - font-size: 0px; - vertical-align: middle; - white-space: nowrap; - @include clearfix; - min-height: 44px; -} +// !btn-group .btn-group { position: relative; @@ -1014,13 +977,16 @@ vertical-align: middle; white-space: nowrap; + border: 1px solid $dark; + border-radius: 5px; + &.dark { border-radius: $radius; background-color: $dark; - color: $lighter; + color: $white; .btn { - color: $lighter; + color: $white; } } @@ -1159,4 +1125,4 @@ margin: 4px; z-index: 100; border-radius: 50px; -} \ No newline at end of file +} diff --git a/styles/dialog.scss b/styles/dialog.scss index 0a14f57..2c2d19c 100644 --- a/styles/dialog.scss +++ b/styles/dialog.scss @@ -125,8 +125,10 @@ @include transition( all 0.125s ease-in-out); pointer-events: none; background-color: $light; - color: $medium; - &.dark {background-color: $dark; } + color: $dark; + &.dark { + background-color: $dark; + } border-radius: $radius*3; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1); @@ -228,4 +230,4 @@ h4 .icon { height: 38px; } -} \ No newline at end of file +} diff --git a/styles/dropdown.scss b/styles/dropdown.scss index 4a7d1cc..9baed27 100644 --- a/styles/dropdown.scss +++ b/styles/dropdown.scss @@ -43,9 +43,6 @@ $predelay: 0; &.hover:hover, &.open { - // &:before {opacity: 0.125; } - // pointer-events: auto; - background-color: $dark; background-color: $light; > * { @@ -111,8 +108,8 @@ $predelay: 0; } &:last-child > .btn{ - border-top-right-radius: $radius ; - border-bottom-right-radius: $radius ; + border-top-right-radius: $radius; + border-bottom-right-radius: $radius; } } } @@ -143,8 +140,7 @@ $predelay: 0; &.light > .dropdown-menu, &.light > .dialog { - background: $light; - color: $medium; + background: white; } > .dropdown-menu { @@ -189,8 +185,6 @@ $predelay: 0; } } - - &.hover:hover > .dialog, &.hover:hover > .dropdown-menu, @@ -206,9 +200,7 @@ $predelay: 0; &.open { > .dialog, > .dropdown-menu { - -webkit-transform: translate3d(-50%, -50%, 100px) scale(1); - -ms-transform: translate3d(-50%, -50%, 100px) scale(1); - transform: translate3d(-50%, -50%, 100px) scale(1); + //transform: translate3d(-50%, -50%, 100px) scale(1); } } @@ -217,10 +209,8 @@ $predelay: 0; left: 50%; top: 50%; margin-top: 0px; - @include transform-origin(center center); - -webkit-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8); - -ms-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8); - transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8); + //@include transform-origin(center center); + //transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8); } } @@ -230,10 +220,8 @@ $predelay: 0; top: auto; bottom: 100%; margin-bottom: 16px; - @include transform-origin(bottom left); - -webkit-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8); - -ms-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8); - transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8); + //@include transform-origin(bottom left); + //transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8); } } @@ -243,10 +231,8 @@ $predelay: 0; top: auto; bottom: 100%; margin-bottom: 16px; - @include transform-origin(bottom center); - -webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); - -ms-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); - transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); + //@include transform-origin(bottom center); + //transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); } } @@ -257,33 +243,37 @@ $predelay: 0; top: 100%; bottom: auto; margin-top: -16px; - @include transform-origin(top center); - -webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); - -ms-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); - transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); + //@include transform-origin(top center); + //transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); } } - + + &.top.left { + > .dialog, + > .dropdown-menu { + left: 70px; + margin-top: -60px; + } + } + &.top.right { > .dialog, > .dropdown-menu { top: 100%; bottom: auto; left: auto; - right: 0; - margin-top: 16px; - @include transform-origin(top right); - -webkit-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8); - -ms-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8); - transform: translate3d(0%, 0%, 100px) scale(0.93,0.8); + + right: 70px; + margin-top: -60px; + + //@include transform-origin(top right); + //transform: translate3d(0%, 0%, 100px) scale(0.93,0.8); } &.hover:hover, &.open { > .dialog, > .dropdown-menu { - -webkit-transform: translate3d(0%, 0%, 100px) scale(1); - -ms-transform: translate3d(0%, 0%, 100px) scale(1); - transform: translate3d(0%, 0%, 100px) scale(1); + //transform: translate3d(0%, 0%, 100px) scale(1); } } @@ -312,9 +302,7 @@ $predelay: 0; > .dialog, > .dropdown-menu { - -webkit-transform: translate3d(-50%, 0%, 100px) scale(1); - -ms-transform: translate3d(-50%, 0%, 100px) scale(1); - transform: translate3d(-50%, 0%, 100px) scale(1); + //transform: translate3d(-50%, 0%, 100px) scale(1); } } } @@ -324,9 +312,7 @@ $predelay: 0; &.open { > .dialog, > .dropdown-menu { - -webkit-transform: translate3d(-33%, 0%, 100px) scale(1) !important; - -ms-transform: translate3d(-33%, 0%, 100px) scale(1) !important; - transform: translate3d(-33%, 0%, 100px) scale(1) !important; + //transform: translate3d(-33%, 0%, 100px) scale(1) !important; } } } @@ -334,7 +320,7 @@ $predelay: 0; .dropdown { - &.options-3 { + /*&.options-3 { &.option-1:after { margin-left: -68px;} &.option-2:after { margin-left: -8px;} &.option-3:after { margin-left: 52px;} @@ -348,8 +334,9 @@ $predelay: 0; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); - } - + }*/ + + /* &:after { @include transition( all 0.1s ease-in-out 0s); content: ""; @@ -362,26 +349,24 @@ $predelay: 0; margin-left: -8px; pointer-events: none !important; left: 50%; - -webkit-transform: scale(0,0); - -ms-transform: scale(0,0); - transform: scale(0,0); + //transform: scale(0,0); } &.bottom:after, &.bottomleft:after { - @include transform-origin(bottom center); + //@include transform-origin(bottom center); bottom: 100%; border-bottom: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #303030; border-left: 8px solid transparent; } - - &.top:after { +*/ + /*&.top:after { @include transform-origin(top center); top: 100%; border-bottom: 8px solid #303030; border-right: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid transparent; - } -} \ No newline at end of file + }*/ +} diff --git a/styles/form-checkbox.scss b/styles/form-checkbox.scss index 66fb272..76550a8 100644 --- a/styles/form-checkbox.scss +++ b/styles/form-checkbox.scss @@ -28,7 +28,6 @@ line-height: 1.5; width: 100%; text-align: left; - color: $medium; font-weight: normal; cursor: pointer; border-radius: $radius; @@ -139,4 +138,4 @@ display: inline-block !important; width: auto !important; padding-right: 15px !important; -} \ No newline at end of file +} diff --git a/styles/form-select.scss b/styles/form-select.scss index 5ae6de6..44f40ee 100644 --- a/styles/form-select.scss +++ b/styles/form-select.scss @@ -2,24 +2,14 @@ @import "mixins"; .input-select { - // background-color: rgba(255,255,255,0.04); - // background-image: url('images/select_arrow.gif'); + background-color: rgba(255,255,255,0.04); + background-image: url('images/select_arrow.gif'); border-radius: $radius; display: inline-block; width: 100%; } -@-moz-document url-prefix() { - select.input{ - background-repeat: no-repeat; - background-position: right center; - cursor: pointer; - } -} - select { - -webkit-appearance:none; - // -moz-appearance:window; appearance:none; padding-left: 0px; width: 100%; diff --git a/styles/form.scss b/styles/form.scss index a09d776..b0206be 100644 --- a/styles/form.scss +++ b/styles/form.scss @@ -113,43 +113,26 @@ select { &.input-white { background-color: white; - color: $medium; box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.05), inset 0 0px 4px rgba(0, 0, 0, 0.1); } &.input-light { background-color: $light; - color: $medium; } &.input-dark { background-color: $darker; - color: $medium; } &.input-lighten { background-color: rgba(255,255,255,0.05); - color: $medium !important; } &.input-darken { background-color: rgba(0,0,0,0.05); - color: $medium; } &.input-transparent { background-color: transparent; - color: $medium; - } - - // &:focus {color: white; } - - &:invalid { - // background-color: rgba(198,101,84,0.05); - // color: rgba(198,101,84,0.75) - - &:after { - - } } @include input-focus(); diff --git a/styles/handles.scss b/styles/handles.scss index bf5c07d..e3ca7fd 100644 --- a/styles/handles.scss +++ b/styles/handles.scss @@ -69,26 +69,27 @@ } .handles { - // background-color: rgba(40,140,215,0.45); - border: 1px solid rgba(255,255,255,0.5); + //border: 1px solid rgba(255,255,255,0.5); position: absolute; left: 0; top: 0; - bottom: 0; + bottom: -1; right: 0; z-index: 800; pointer-events: none; + background: rgba(255,255,255,0.1); + &:after{ - border: 1px dotted rgba(40,140,215,1); + border: 4px dotted #000000; content: ""; display: block; position: absolute; height: auto; width: auto; - top: -1px; - left: -1px; - right: -1px; + top: 0px; + left: 0px; + right: 0px; bottom: -1px; } } @@ -97,7 +98,7 @@ border: 8px solid rgba(255,255,255,0.5); &:after{ - border: 8px dotted rgba(40,140,215,1); + border: 8px dotted #000000; top: -4px; left: -4px; right: -4px; @@ -332,16 +333,15 @@ pointer-events:auto; z-index: 2000; position: absolute; - width: 30px !important; - height: 30px !important; border-radius: 100%; - margin: -15px; - - border: 1px solid rgba(0,0,0,0.25); + border: 1px solid black; + margin: -5px; + padding: 4px; + &:hover { - background-color: rgba(255,255,255,0.5); - cursor: move; + background-color: black; + cursor: move; } } @@ -428,15 +428,8 @@ border-style: solid; border-width: 10px; border-color: transparent; - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; - - -webkit-transition: all .05s ease-in-out; - -moz-transition: all .05s ease-in-out; - -ms-transition: all .05s ease-in-out; - -o-transition: all .05s ease-in-out; - transition: all .05s ease-in-out; + background-clip: padding-box; + transition: all .05s ease-in-out; } div { diff --git a/styles/header.scss b/styles/header.scss index 80a850d..2b9a4ab 100644 --- a/styles/header.scss +++ b/styles/header.scss @@ -31,17 +31,14 @@ } .header-left { - @include transform-origin(center left); left: 0; padding-left: 10px; } -.header-right { - @include transform-origin(center right); +.header-right { right: 0; - padding-right: 10px; + padding-right: 20px; } .header-center { - @include transform-origin(center center); width: 100%; left: 0; right: 0; diff --git a/styles/main.scss b/styles/main.scss index bbe8404..ce953b8 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -2,7 +2,6 @@ @import "mixins"; .wrapper { - //@include transition( all 0.25s ease-in-out); position: relative; margin: auto; max-width: 1160px; diff --git a/styles/modal.scss b/styles/modal.scss index 5129ce2..b02a4c3 100644 --- a/styles/modal.scss +++ b/styles/modal.scss @@ -59,9 +59,9 @@ } .close { - position: fixed; - margin: 44px 44px; - .icon {display: block; } + margin-left: 44px; + margin-bottom: 44px; + .icon {display: block; } } figure { @@ -146,7 +146,6 @@ .modal-header { padding: 30px 40px; position: relative; - color: $medium; } .close-search { @@ -300,4 +299,4 @@ // .btn-block + .btn-block { // margin-left: 0; // } -} \ No newline at end of file +} diff --git a/styles/normalize.scss b/styles/normalize.scss index 98e793b..f87d302 100644 --- a/styles/normalize.scss +++ b/styles/normalize.scss @@ -1,17 +1,5 @@ /*! normalize.css v3.0.0 | MIT License | git.io/normalize */ -// -// 1. Set default font family to sans-serif. -// 2. Prevent iOS text size adjust after orientation change, without disabling -// user zoom. -// - -html { - font-family: sans-serif; // 1 - -ms-text-size-adjust: 100%; // 2 - -webkit-text-size-adjust: 100%; // 2 -} - // // Remove default margin. // @@ -420,4 +408,4 @@ table { td, th { padding: 0; -} \ No newline at end of file +} diff --git a/styles/space-sections.scss b/styles/space-sections.scss index 2185a27..b1c0443 100644 --- a/styles/space-sections.scss +++ b/styles/space-sections.scss @@ -118,7 +118,7 @@ padding: 0 !important; .wrapper { - border: 1px dotted rgba(128,128,128,0.5); + border: 4px solid black; transition-duration: 0.25s; transition-property: width, height, background-color; @@ -132,32 +132,27 @@ max-height: 100%; position: relative; - overflow: scroll; - - /** { - -moz-user-select: none !important; // firefox has selection problems - }*/ } .snap-ruler-h { pointer-events: none; position: fixed; - z-index: 0; + z-index: 2000; right: 0px; height: 1px; - background-color: rgba(0,0,0,0.5); + background-color: black; left: 0px; } .snap-ruler-v { pointer-events: none; position: fixed; - z-index: 0; + z-index: 2000; top: 0px; bottom: 0px; width: 1px; - background-color: rgba(0,0,0,0.5); + background-color: black; } .cursor { @@ -227,30 +222,12 @@ } #space { - /*-webkit-user-select: all; - -ms-user-select: all; - -moz-user-select: all; - user-select: all;*/ + // user-select: all; position: relative; height: 100% !important; - - //padding-top: 64px !important; background-color: #eee; } -#made-with { - position: fixed; - width: 100%; - bottom: 0; - padding: 12px; - opacity: 0.25; - a {color: $dark; } - p { - text-align: center; - font-size: 11px; - } -} - #baseline { position: absolute; width: 100%; @@ -298,8 +275,8 @@ .space-bounds { position: absolute; - left: 0px; - top: 0px; + left: 0; + top: 0; pointer-events: none; background-size: cover; background-repeat: no-repeat; diff --git a/styles/style.scss b/styles/style.scss index 15ebdc8..bff34f4 100644 --- a/styles/style.scss +++ b/styles/style.scss @@ -65,10 +65,8 @@ html, body { height:100%; - -webkit-tap-highlight-color: transparent; - background-color: white; background-color: $light; - color: $darker; + color: $black; } *[contenteditable="true"] { @@ -89,60 +87,21 @@ body { cursor: default; } +#home { + background-color: white; +} + .img img { max-width: 100%; height: auto; } -.plan { - color: $medium; - border-radius: $radius; - display: inline-block; - padding: 30px; - - background-color: transparent; - border: 2px solid rgba(0,0,0,0.05); - width: 100%; - - &.active { - background-color: white; - border: none; - } - - h4 { - color: black; - margin-bottom: 0px; - } - - p { - font-size: 13px; - line-height: 1.4; - margin-top: 5px; - margin-bottom: 5px; - } - - ul { - list-style: none; - font-size: 10px; - margin: 0px; - padding: 0px; - border-top: 2px solid rgba(0,0,0,0.05); - padding-top: 20px; - margin-top: 20px; - margin-bottom: 20px; - li {padding-top: 2px; } - } -} - #startup { background-position: center; background-image:url(/images/diamond.svg); background-repeat: no-repeat; } -#home { - background-color: white; -} .layer { @include transition( all 0.2s ease-in-out); diff --git a/styles/table.scss b/styles/table.scss index ed008fc..e4e935e 100644 --- a/styles/table.scss +++ b/styles/table.scss @@ -8,10 +8,9 @@ } .table { width: 100%; - color: $medium;; font-family: $main-font; - // border-radius: $radius; - // border: 2px solid rgba(0,0,0,0.0125) !important; + border-radius: $radius; + border: 2px solid rgba(0,0,0,0.0125); } .table thead > tr > th:first-child, diff --git a/styles/toolbar.scss b/styles/toolbar.scss index e347070..778e811 100644 --- a/styles/toolbar.scss +++ b/styles/toolbar.scss @@ -19,50 +19,19 @@ } margin: auto; - //text-align: center; position: fixed; - bottom: 0px; - //width: 100%; + top: 10px; z-index: 3000; - padding: $gutter-b; + padding: 0; font-size: 0; line-height: 0; - transition-duration: 0.15s; - transition-timing-function: ease-in-out; - transition-delay: initial; - transition-property: opacity, transform; - @include backface-visibility(hidden); + // FIXME questionable? - @include translate3d(0, 10px, 0); pointer-events: none !important; - opacity: 0; - - &.out { - @include translate3d(0, 10px, 0); - * {pointer-events: none !important; } - button, input, .dialog { - display: none; - } - } - - &.in { - @include translate3d(0, 0, 0); - - &.out { - @include translate3d(0, 10px, 0); - * {pointer-events: none !important; } - } - } > * { - margin: 0 2px; - margin-top: 4px; pointer-events: auto !important; - &.out { - margin: 0; - opacity: 0; - } } &.toolbar-vertical { @@ -187,7 +156,6 @@ } .toolbar-properties { - bottom: 64px; z-index: 0; &.in { @@ -196,12 +164,12 @@ .icon-sm { z-index: 110; - background-color: #222; + //background-color: #222; border-radius: 50px; } .jewel { - border: 2px solid rgba(255,255,255,0.5); + border: 2px solid #888; background-color: transparent; color: #989898; width: 36px; @@ -228,5 +196,15 @@ .toolbar-elements > .btn-group, .toolbar-properties > .btn-group { - box-shadow: 0 0 30px rgba(0,0,0,0.5); + //box-shadow: 0 0 30px rgba(0,0,0,0.5); + background-color: $white; } + +.toolbar-elements { + left: 10px; +} + +.toolbar-properties { + right: 20px; +} + diff --git a/styles/tools.scss b/styles/tools.scss index 797e7bb..e246730 100644 --- a/styles/tools.scss +++ b/styles/tools.scss @@ -33,10 +33,7 @@ @include translate3d(0, 0, 0); // @include backface-visibility(hidden); - -webkit-perspective: 1000; - -moz-perspective: 1000; - -ms-perspective: 1000; - perspective: 1000; + perspective: 1000; .panel-toggles { @include transition( all 0.15s ease-in-out); @@ -99,10 +96,7 @@ display: table-cell; vertical-align: middle; // @include backface-visibility(hidden); - -webkit-perspective: 1000; - -moz-perspective: 1000; - -ms-perspective: 1000; - perspective: 1000; + perspective: 1000; z-index: 1000; diff --git a/styles/vars.scss b/styles/vars.scss index 1ec69bf..4203ebb 100644 --- a/styles/vars.scss +++ b/styles/vars.scss @@ -9,13 +9,6 @@ $green: #2ecc71; $red: #ff5955; $yellow: #f1c40f; -$light: #f5f5f5; -$lightish: #eee; - - -$facebook: #3e5b97; -$twitter: #2aa7de; - $color-1 : #4a2f7e; // purple $color-2 : #9b59b6; // lilac $color-3 : #3498db; // blue @@ -32,15 +25,18 @@ $black: #111; // black $darker: #292929; $dark: #222; // dark $medium: #888; // medium +$light: #f5f5f5; +$lightish: #eee; // fixme $lighter: #989898; +$white: #ffffff; $sidebar-width: 280px; -$main-font: Avenir W01; -$sec-font: Avenir W01; +$main-font: Inter; +$sec-font: Inter; -$font-size: 18px; -$line-height: 24px; +$font-size: 12pt; +$line-height: 1.5em; $gutter-a: 10px; $gutter-b: 20px; @@ -48,4 +44,4 @@ $gutter-c: 40px; $gutter-d: 60px; $gutter-e: 80px; -$folder-gutter: 20px; \ No newline at end of file +$folder-gutter: 20px; diff --git a/views/layouts/outer.html b/views/layouts/outer.html index 603d96a..e3851d8 100644 --- a/views/layouts/outer.html +++ b/views/layouts/outer.html @@ -9,10 +9,7 @@ - - - - + @@ -53,7 +50,7 @@

[[ __("contact") ]] - © 2011–2018 The Spacedeck Open Developers https://github.com/spacedeck/spacedeck-open + © 2011–2020 The Spacedeck Open Developers https://github.com/spacedeck/spacedeck-open

diff --git a/views/partials/folders.html b/views/partials/folders.html index 79eaceb..2106a8e 100644 --- a/views/partials/folders.html +++ b/views/partials/folders.html @@ -5,11 +5,19 @@ - -
+ +
+ - - - - +
@@ -68,7 +68,7 @@
- +
@@ -78,7 +78,7 @@

[[__("access_current_members")]]

- + @@ -91,7 +91,7 @@
Icon Email / Name Role {{member.user.email}} {{member.email_invited}} - {{member.user.nickname}} + {{member.user.nickname}} (pending) @@ -113,7 +113,7 @@

- +
diff --git a/views/partials/space.html b/views/partials/space.html index 3b7482f..86ef010 100644 --- a/views/partials/space.html +++ b/views/partials/space.html @@ -1,131 +1,3 @@ - -
-
-
- - - -
-
-
- -
- -
- -
- -
- -
- - - -
-
- -
-
-
-
-
- -
-
- -
- - - - - - - - - - - - {{active_space.name}} - - {{active_space.name}} - - - -
- - - -
- -
-
- - [[__("offline")]] -
-
@@ -140,14 +12,8 @@ - -
- -
-
+
@@ -158,17 +24,13 @@
- - -
+
{% include "./tool/toolbar-elements.html" %} @@ -206,7 +68,7 @@
-
+
{{a.view.link_caption}} -
@@ -463,7 +324,7 @@
-
+ -
- -
- - -
diff --git a/views/partials/tool/color.html b/views/partials/tool/color.html index a4ee018..ced83e7 100644 --- a/views/partials/tool/color.html +++ b/views/partials/tool/color.html @@ -126,19 +126,11 @@ - + px
- -
- - - - - -
+
diff --git a/views/partials/tool/toolbar-elements.html b/views/partials/tool/toolbar-elements.html index c08d8e1..d6080f6 100644 --- a/views/partials/tool/toolbar-elements.html +++ b/views/partials/tool/toolbar-elements.html @@ -1,21 +1,24 @@ -
+
+ +
+ + + + + + + + + -
+ - - -
+
- + +
-
+
-
+
-
+
+ + + +
diff --git a/views/partials/tool/toolbar-object.html b/views/partials/tool/toolbar-object.html index 132f71d..0d57cd9 100644 --- a/views/partials/tool/toolbar-object.html +++ b/views/partials/tool/toolbar-object.html @@ -1,42 +1,38 @@ -
+
-
-
+
- -
-
- -
- -
+
-
-
- - -
- -
- {% include "./filter.html" %} -
-
- -
+
-
+
-
+
-
+
+ Font +
@@ -115,7 +97,7 @@ -
+