Skip to content
GitLab
Commit 58250a72 authored by mntmn's avatar mntmn
Browse files

WIP MNT design/UX cleanup

parent d19d0222
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 344 additions and 632 deletions
+344 -632
.gitignore
+ 2
- 0
View file @ 58250a72
node_modules node_modules
javascripts/maps javascripts/maps
javascripts/spacedeck.js javascripts/spacedeck.js
public/stylesheets/*.css
database.sqlite
*.swp *.swp
*~ *~
package.json
+ 1
- 0
View file @ 58250a72
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
"moment": "^2.19.3", "moment": "^2.19.3",
"morgan": "^1.9.1", "morgan": "^1.9.1",
"node-phantom-simple": "2.2.4", "node-phantom-simple": "2.2.4",
"node-server-screenshot": "^0.2.1",
"nodemailer": "^4.6.7", "nodemailer": "^4.6.7",
"phantomjs-prebuilt": "^2.1.16", "phantomjs-prebuilt": "^2.1.16",
"read-chunk": "^2.1.0", "read-chunk": "^2.1.0",
......
public/javascripts/spacedeck_sections.js
+ 15
- 35
View file @ 58250a72
...@@ -63,8 +63,8 @@ var SpacedeckSections = { ...@@ -63,8 +63,8 @@ var SpacedeckSections = {
active_style: { active_style: {
border_radius: 0, border_radius: 0,
stroke: 0, stroke: 0,
font_family: "Avenir W01", font_family: "Inter",
font_size: 18, font_size: 36,
line_height: 1.5, line_height: 1.5,
letter_spacing: 0, letter_spacing: 0,
...@@ -136,18 +136,8 @@ var SpacedeckSections = { ...@@ -136,18 +136,8 @@ var SpacedeckSections = {
], ],
fonts: [ fonts: [
"Arial", "Inter",
"Courier", "Courier"
"Georgia",
"Verdana",
"Comic Sans MS",
"Montserrat",
"Lato",
"Roboto",
"Crimson Text",
"EB Garamond",
"Vollkorn",
"Avenir W01"
], ],
detected_text_formats: {}, detected_text_formats: {},
...@@ -180,7 +170,7 @@ var SpacedeckSections = { ...@@ -180,7 +170,7 @@ var SpacedeckSections = {
toolbar_props_in: false, toolbar_props_in: false,
toolbar_artifacts_x: "-1000px", toolbar_artifacts_x: "-1000px",
toolbar_artifacts_y: "-1000px", toolbar_artifacts_y: "-1000px",
toolbar_artifacts_in: false toolbar_artifacts_in: true
}, },
methods: { methods: {
...@@ -1057,7 +1047,7 @@ var SpacedeckSections = { ...@@ -1057,7 +1047,7 @@ var SpacedeckSections = {
this.toolbar_props_x = pp.x+"px"; this.toolbar_props_x = pp.x+"px";
this.toolbar_props_y = pp.y+"px"; this.toolbar_props_y = pp.y+"px";
this.hide_toolbar_artifacts(); //this.hide_toolbar_artifacts();
} }
this.selection_metrics.x1 = sr.x1; this.selection_metrics.x1 = sr.x1;
...@@ -1125,9 +1115,12 @@ var SpacedeckSections = { ...@@ -1125,9 +1115,12 @@ var SpacedeckSections = {
var er = this.enclosing_rect(this.active_space_artifacts); var er = this.enclosing_rect(this.active_space_artifacts);
if (!er) return; if (!er) return;
this.active_space.width =Math.max(er.x2+100, window.innerWidth); // resize space
this.active_space.height=Math.max(er.y2+100, window.innerHeight); 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 || if (this._last_bounds_width != this.active_space.width ||
this._last_bounds_height != this.active_space.height) { this._last_bounds_height != this.active_space.height) {
this._last_bounds_width = this.active_space.width; this._last_bounds_width = this.active_space.width;
...@@ -1544,7 +1537,7 @@ var SpacedeckSections = { ...@@ -1544,7 +1537,7 @@ var SpacedeckSections = {
add_artifact: function (space, item_type, url, evt) { add_artifact: function (space, item_type, url, evt) {
this.active_tool = "pointer"; this.active_tool = "pointer";
this.mouse_state = "idle"; this.mouse_state = "idle";
this.hide_toolbar_artifacts(); //this.hide_toolbar_artifacts();
if (!url && (item_type == 'image' || item_type == 'video' || item_type == 'embed')) { if (!url && (item_type == 'image' || item_type == 'video' || item_type == 'embed')) {
url = prompt("URL?"); url = prompt("URL?");
...@@ -1788,9 +1781,7 @@ var SpacedeckSections = { ...@@ -1788,9 +1781,7 @@ var SpacedeckSections = {
if (this.active_space_role=="viewer") { if (this.active_space_role=="viewer") {
return false; return false;
} }
this.hide_toolbar_artifacts();
// 1. create placeholder artifact // 1. create placeholder artifact
var w=300,h=150; var w=300,h=150;
var fill="transparent"; var fill="transparent";
...@@ -2578,12 +2569,11 @@ var SpacedeckSections = { ...@@ -2578,12 +2569,11 @@ var SpacedeckSections = {
}, },
hide_toolbar_props: function() { hide_toolbar_props: function() {
this.toolbar_props_in = false; // FIXME test
//this.toolbar_props_in = false;
}, },
show_toolbar_artifacts: function(x,y) { show_toolbar_artifacts: function(x,y) {
this.toolbar_artifacts_x = (x-175)+"px";
this.toolbar_artifacts_y = y+"px";
this.toolbar_artifacts_in = true; this.toolbar_artifacts_in = true;
}, },
...@@ -2593,29 +2583,19 @@ var SpacedeckSections = { ...@@ -2593,29 +2583,19 @@ var SpacedeckSections = {
start_adding_artifact: function(evt) { start_adding_artifact: function(evt) {
evt = fixup_touches(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) { start_drawing_scribble: function(evt) {
this.hide_toolbar_artifacts();
this.active_tool = "scribble"; this.active_tool = "scribble";
this.opened_dialog = "none"; this.opened_dialog = "none";
}, },
start_drawing_arrow: function(evt) { start_drawing_arrow: function(evt) {
this.hide_toolbar_artifacts();
this.active_tool = "arrow"; this.active_tool = "arrow";
this.opened_dialog = "none"; this.opened_dialog = "none";
}, },
start_drawing_line: function(evt) { start_drawing_line: function(evt) {
this.hide_toolbar_artifacts();
this.active_tool = "line"; this.active_tool = "line";
this.opened_dialog = "none"; this.opened_dialog = "none";
}, },
......
public/javascripts/spacedeck_spaces.js
+ 3
- 7
View file @ 58250a72
...@@ -273,9 +273,9 @@ var SpacedeckSpaces = { ...@@ -273,9 +273,9 @@ var SpacedeckSpaces = {
this.discover_zones(); this.discover_zones();
//window.setTimeout(function() { window.setTimeout(function() {
// this.zoom_to_fit(); this.zoom_to_fit();
//}.bind(this),10); }.bind(this),10);
if (on_success) { if (on_success) {
on_success(); on_success();
...@@ -876,10 +876,6 @@ var SpacedeckSpaces = { ...@@ -876,10 +876,6 @@ var SpacedeckSpaces = {
}.bind(this)); }.bind(this));
}, },
emojified_comment: function(comment) {
return twemoji.parse(comment);
},
set_folder_sorting: function(key,reverse) { set_folder_sorting: function(key,reverse) {
this.folder_sorting = key; this.folder_sorting = key;
this.folder_reverse = reverse?-1:1; this.folder_reverse = reverse?-1:1;
......
public/javascripts/spacedeck_whiteboard.js
+ 50
- 6
View file @ 58250a72
...@@ -80,10 +80,16 @@ function setup_whiteboard_directives() { ...@@ -80,10 +80,16 @@ function setup_whiteboard_directives() {
evt.stopPropagation(); evt.stopPropagation();
} }
var a = $scope.find_artifact_by_id(evt.currentTarget.id.replace("artifact-",""));
if ($scope.active_tool == "zoom") return; 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") { if ($scope.active_tool == "eyedrop") {
var arts = $scope.selected_artifacts(); var arts = $scope.selected_artifacts();
if (!$scope.is_selected(a) && arts.length > 0) { if (!$scope.is_selected(a) && arts.length > 0) {
...@@ -196,8 +202,10 @@ function setup_whiteboard_directives() { ...@@ -196,8 +202,10 @@ function setup_whiteboard_directives() {
}, },
handle_mouse_down_space: function(evt) { 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; var $scope = this.vm.$root;
$scope.opened_dialog="none"; $scope.opened_dialog="none";
...@@ -214,7 +222,7 @@ function setup_whiteboard_directives() { ...@@ -214,7 +222,7 @@ function setup_whiteboard_directives() {
this.deselect(); this.deselect();
this.mouse_state = "transform"; this.mouse_state = "transform";
$scope.mouse_state = this.mouse_state; $scope.mouse_state = this.mouse_state;
this.start_adding_note(evt); this.start_drawing_note(evt);
return; return;
} else if ($scope.active_tool=="arrow") { } else if ($scope.active_tool=="arrow") {
...@@ -492,6 +500,7 @@ function setup_whiteboard_directives() { ...@@ -492,6 +500,7 @@ function setup_whiteboard_directives() {
if (!xdists[0] || xdists[0][0]>TOL) { if (!xdists[0] || xdists[0][0]>TOL) {
results.snapx = [0,x]; // distance, coordinate results.snapx = [0,x]; // distance, coordinate
} else { } else {
// FIXME snap rulers are broken
//$scope.snap_ruler_x = xdists[0][1]; //$scope.snap_ruler_x = xdists[0][1];
} }
if (!ydists[0] || ydists[0][0]>TOL) { if (!ydists[0] || ydists[0][0]>TOL) {
...@@ -516,6 +525,41 @@ function setup_whiteboard_directives() { ...@@ -516,6 +525,41 @@ function setup_whiteboard_directives() {
return point; 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: "<p>Text</p>",
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) { start_drawing_scribble: function(evt) {
evt.preventDefault(); evt.preventDefault();
evt.stopPropagation(); evt.stopPropagation();
...@@ -851,7 +895,7 @@ function setup_whiteboard_directives() { ...@@ -851,7 +895,7 @@ function setup_whiteboard_directives() {
var scale_x = lead_x ? (moved_x)/lead_x : 1; var scale_x = lead_x ? (moved_x)/lead_x : 1;
var scale_y = lead_y ? (moved_y)/lead_y : 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) { $scope.update_selected_artifacts(function(a) {
var old_a = $scope.find_artifact_before_transaction(a); var old_a = $scope.find_artifact_before_transaction(a);
......
public/stylesheets/style.css
+ 165
- 381
View file @ 58250a72
This diff is collapsed.
routes/api/space_exports.js
+ 2
- 2
View file @ 58250a72
...@@ -78,14 +78,14 @@ router.get('/png', function(req, res, next) { ...@@ -78,14 +78,14 @@ router.get('/png', function(req, res, next) {
var oldPath = url.parse(oldUrl).pathname; var oldPath = url.parse(oldUrl).pathname;
uploader.removeFile(oldPath, function(err, res) {}); uploader.removeFile(oldPath, function(err, res) {});
} }
fs.unlink(local_path); fs.unlinkSync(local_path);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
}); });
try { try {
fs.unlink(localResizedFilePath); fs.unlinkSync(localResizedFilePath);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
......
routes/api/space_memberships.js
+ 1
- 1
View file @ 58250a72
...@@ -84,7 +84,7 @@ router.post('/', function(req, res, next) { ...@@ -84,7 +84,7 @@ router.post('/', function(req, res, next) {
} else { } else {
res.status(400).json({ res.status(400).json({
"error": "user already in space" "error": "This email is already included in the Space memberships."
}); });
} }
......
styles/artifact.scss
+ 7
- 3
View file @ 58250a72
...@@ -26,12 +26,12 @@ ...@@ -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"; content: "Double click to edit";
opacity: 0.25; 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"; content: "Type here";
opacity: 0.25; opacity: 0.25;
}*/ }*/
...@@ -469,7 +469,7 @@ ...@@ -469,7 +469,7 @@
color: black; color: black;
//@include user-select(none); //@include user-select(none);
white-space: normal; white-space: normal;
font-size: 18px; font-size: 36px;
&.artifact-zone { &.artifact-zone {
border: 1px solid rgba(46,204,113,1); border: 1px solid rgba(46,204,113,1);
...@@ -553,6 +553,10 @@ body:not(.present-mode) { ...@@ -553,6 +553,10 @@ body:not(.present-mode) {
cursor: grab !important; cursor: grab !important;
} }
.tool-note {
cursor: crosshair !important;
}
.artifact.state-idle { .artifact.state-idle {
.progress, .progress-text { .progress, .progress-text {
display: none; display: none;
......
styles/button.scss
+ 26
- 60
View file @ 58250a72
...@@ -7,12 +7,6 @@ ...@@ -7,12 +7,6 @@
.btn-group.colors { .btn-group.colors {
.btn { .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); box-shadow: inset 0 0 30px 0px rgba(40,40,40,0.1);
} }
} }
...@@ -64,7 +58,7 @@ ...@@ -64,7 +58,7 @@
backface-visibility: hidden; backface-visibility: hidden;
cursor: pointer; cursor: pointer;
background-color: $light; background-color: $light;
color: $medium;; color: $black;
@include user-select(none); @include user-select(none);
&:last-child {border: none;} &:last-child {border: none;}
...@@ -82,12 +76,9 @@ ...@@ -82,12 +76,9 @@
&.btn-link { &.btn-link {
background-color: transparent; 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 { &.btn-round {
border-radius: 100px !important; border-radius: 100px !important;
} }
...@@ -96,21 +87,10 @@ ...@@ -96,21 +87,10 @@
border-radius: 6px !important; border-radius: 6px !important;
} }
// &.close {
// position: absolute;
// top: 15px;
// right: 15px;
// z-index: 4000;
// font-size: 40px;
// }
&.btn-nude { &.btn-nude {
min-width: 0 !important; min-width: 0 !important;
// font-size: inherit !important;
padding: 0 !important; padding: 0 !important;
// height: auto !important;
background-color: transparent; background-color: transparent;
color: $medium;
} }
&.btn-nude + .btn-nude { &.btn-nude + .btn-nude {
...@@ -123,7 +103,7 @@ ...@@ -123,7 +103,7 @@
&.btn-stroke { &.btn-stroke {
box-shadow: inset 0 0 0 1px $dark; box-shadow: inset 0 0 0 1px $dark;
color: $dark !important; color: $black;
background-color: transparent; background-color: transparent;
&:active { &:active {
box-shadow: inset 0 0 0 1px white; box-shadow: inset 0 0 0 1px white;
...@@ -132,9 +112,8 @@ ...@@ -132,9 +112,8 @@
} }
&.btn-stroke-darken { &.btn-stroke-darken {
//box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); border: 1px solid $black;
border: 1px solid rgba(0,0,0,0.1); color: $black;
color: $medium;
background-color: transparent; background-color: transparent;
&:active { &:active {
//box-shadow: inset 0 0 0 1px $dark; //box-shadow: inset 0 0 0 1px $dark;
...@@ -263,9 +242,18 @@ ...@@ -263,9 +242,18 @@
&.btn-transparent { &.btn-transparent {
background-color: transparent; background-color: transparent;
color: $medium; color: $dark;
&.active {color: $darker !important; } &.active {
&.open {color: white !important; } //color: $black !important;
color: $white;
background-color: $black;
}
&.open {
//color: $black !important;
color: $white;
background-color: $black;
border-radius: 0;
}
} }
&.btn-transparent-medium { &.btn-transparent-medium {
...@@ -714,7 +702,6 @@ ...@@ -714,7 +702,6 @@
} }
> * { > * {
border-radius: 0 !important;
background-clip: padding-box; background-clip: padding-box;
width: 100%; width: 100%;
float: left; float: left;
...@@ -775,7 +762,7 @@ ...@@ -775,7 +762,7 @@
} }
} }
.btn-group { .btn-group {
@include scale(0,0); //@include scale(0,0);
//@include transition( all 0.1s 0s ease-in-out); //@include transition( all 0.1s 0s ease-in-out);
position: absolute; position: absolute;
...@@ -787,7 +774,7 @@ ...@@ -787,7 +774,7 @@
margin-left: -12px; margin-left: -12px;
.btn { .btn {
@include scale(0,0); //@include scale(0,0);
//@include transition( all 0.1s 0.05s ease-in-out); //@include transition( all 0.1s 0.05s ease-in-out);
...@@ -979,31 +966,7 @@ ...@@ -979,31 +966,7 @@
} }
} }
.btn-group.bottom-left > .btn { // !btn-group
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; position: relative;
...@@ -1014,13 +977,16 @@ ...@@ -1014,13 +977,16 @@
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
border: 1px solid $dark;
border-radius: 5px;
&.dark { &.dark {
border-radius: $radius; border-radius: $radius;
background-color: $dark; background-color: $dark;
color: $lighter; color: $white;
.btn { .btn {
color: $lighter; color: $white;
} }
} }
...@@ -1159,4 +1125,4 @@ ...@@ -1159,4 +1125,4 @@
margin: 4px; margin: 4px;
z-index: 100; z-index: 100;
border-radius: 50px; border-radius: 50px;
} }
\ No newline at end of file
styles/dialog.scss
+ 5
- 3
View file @ 58250a72
...@@ -125,8 +125,10 @@ ...@@ -125,8 +125,10 @@
@include transition( all 0.125s ease-in-out); @include transition( all 0.125s ease-in-out);
pointer-events: none; pointer-events: none;
background-color: $light; background-color: $light;
color: $medium; color: $dark;
&.dark {background-color: $dark; } &.dark {
background-color: $dark;
}
border-radius: $radius*3; 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); 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 @@ ...@@ -228,4 +230,4 @@
h4 .icon { h4 .icon {
height: 38px; height: 38px;
} }
} }
\ No newline at end of file
styles/dropdown.scss
+ 40
- 55
View file @ 58250a72
...@@ -43,9 +43,6 @@ $predelay: 0; ...@@ -43,9 +43,6 @@ $predelay: 0;
&.hover:hover, &.hover:hover,
&.open { &.open {
// &:before {opacity: 0.125; }
// pointer-events: auto;
background-color: $dark;
background-color: $light; background-color: $light;
> * { > * {
...@@ -111,8 +108,8 @@ $predelay: 0; ...@@ -111,8 +108,8 @@ $predelay: 0;
} }
&:last-child > .btn{ &:last-child > .btn{
border-top-right-radius: $radius ; border-top-right-radius: $radius;
border-bottom-right-radius: $radius ; border-bottom-right-radius: $radius;
} }
} }
} }
...@@ -143,8 +140,7 @@ $predelay: 0; ...@@ -143,8 +140,7 @@ $predelay: 0;
&.light > .dropdown-menu, &.light > .dropdown-menu,
&.light > .dialog { &.light > .dialog {
background: $light; background: white;
color: $medium;
} }
> .dropdown-menu { > .dropdown-menu {
...@@ -189,8 +185,6 @@ $predelay: 0; ...@@ -189,8 +185,6 @@ $predelay: 0;
} }
} }
&.hover:hover > .dialog, &.hover:hover > .dialog,
&.hover:hover > .dropdown-menu, &.hover:hover > .dropdown-menu,
...@@ -206,9 +200,7 @@ $predelay: 0; ...@@ -206,9 +200,7 @@ $predelay: 0;
&.open { &.open {
> .dialog, > .dialog,
> .dropdown-menu { > .dropdown-menu {
-webkit-transform: translate3d(-50%, -50%, 100px) scale(1); //transform: translate3d(-50%, -50%, 100px) scale(1);
-ms-transform: translate3d(-50%, -50%, 100px) scale(1);
transform: translate3d(-50%, -50%, 100px) scale(1);
} }
} }
...@@ -217,10 +209,8 @@ $predelay: 0; ...@@ -217,10 +209,8 @@ $predelay: 0;
left: 50%; left: 50%;
top: 50%; top: 50%;
margin-top: 0px; margin-top: 0px;
@include transform-origin(center center); //@include transform-origin(center center);
-webkit-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8); //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);
} }
} }
...@@ -230,10 +220,8 @@ $predelay: 0; ...@@ -230,10 +220,8 @@ $predelay: 0;
top: auto; top: auto;
bottom: 100%; bottom: 100%;
margin-bottom: 16px; margin-bottom: 16px;
@include transform-origin(bottom left); //@include transform-origin(bottom left);
-webkit-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8); //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);
} }
} }
...@@ -243,10 +231,8 @@ $predelay: 0; ...@@ -243,10 +231,8 @@ $predelay: 0;
top: auto; top: auto;
bottom: 100%; bottom: 100%;
margin-bottom: 16px; margin-bottom: 16px;
@include transform-origin(bottom center); //@include transform-origin(bottom center);
-webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); //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);
} }
} }
...@@ -257,33 +243,37 @@ $predelay: 0; ...@@ -257,33 +243,37 @@ $predelay: 0;
top: 100%; top: 100%;
bottom: auto; bottom: auto;
margin-top: -16px; margin-top: -16px;
@include transform-origin(top center); //@include transform-origin(top center);
-webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8); //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);
} }
} }
&.top.left {
> .dialog,
> .dropdown-menu {
left: 70px;
margin-top: -60px;
}
}
&.top.right { &.top.right {
> .dialog, > .dialog,
> .dropdown-menu { > .dropdown-menu {
top: 100%; top: 100%;
bottom: auto; bottom: auto;
left: auto; left: auto;
right: 0;
margin-top: 16px; right: 70px;
@include transform-origin(top right); margin-top: -60px;
-webkit-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
-ms-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8); //@include transform-origin(top right);
transform: translate3d(0%, 0%, 100px) scale(0.93,0.8); //transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
} }
&.hover:hover, &.hover:hover,
&.open { &.open {
> .dialog, > .dialog,
> .dropdown-menu { > .dropdown-menu {
-webkit-transform: translate3d(0%, 0%, 100px) scale(1); //transform: translate3d(0%, 0%, 100px) scale(1);
-ms-transform: translate3d(0%, 0%, 100px) scale(1);
transform: translate3d(0%, 0%, 100px) scale(1);
} }
} }
...@@ -312,9 +302,7 @@ $predelay: 0; ...@@ -312,9 +302,7 @@ $predelay: 0;
> .dialog, > .dialog,
> .dropdown-menu { > .dropdown-menu {
-webkit-transform: translate3d(-50%, 0%, 100px) scale(1); //transform: translate3d(-50%, 0%, 100px) scale(1);
-ms-transform: translate3d(-50%, 0%, 100px) scale(1);
transform: translate3d(-50%, 0%, 100px) scale(1);
} }
} }
} }
...@@ -324,9 +312,7 @@ $predelay: 0; ...@@ -324,9 +312,7 @@ $predelay: 0;
&.open { &.open {
> .dialog, > .dialog,
> .dropdown-menu { > .dropdown-menu {
-webkit-transform: translate3d(-33%, 0%, 100px) scale(1) !important; //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;
} }
} }
} }
...@@ -334,7 +320,7 @@ $predelay: 0; ...@@ -334,7 +320,7 @@ $predelay: 0;
.dropdown { .dropdown {
&.options-3 { /*&.options-3 {
&.option-1:after { margin-left: -68px;} &.option-1:after { margin-left: -68px;}
&.option-2:after { margin-left: -8px;} &.option-2:after { margin-left: -8px;}
&.option-3:after { margin-left: 52px;} &.option-3:after { margin-left: 52px;}
...@@ -348,8 +334,9 @@ $predelay: 0; ...@@ -348,8 +334,9 @@ $predelay: 0;
-webkit-transform: scale(1); -webkit-transform: scale(1);
-ms-transform: scale(1); -ms-transform: scale(1);
transform: scale(1); transform: scale(1);
} }*/
/*
&:after { &:after {
@include transition( all 0.1s ease-in-out 0s); @include transition( all 0.1s ease-in-out 0s);
content: ""; content: "";
...@@ -362,26 +349,24 @@ $predelay: 0; ...@@ -362,26 +349,24 @@ $predelay: 0;
margin-left: -8px; margin-left: -8px;
pointer-events: none !important; pointer-events: none !important;
left: 50%; left: 50%;
-webkit-transform: scale(0,0); //transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
} }
&.bottom:after, &.bottomleft:after { &.bottom:after, &.bottomleft:after {
@include transform-origin(bottom center); //@include transform-origin(bottom center);
bottom: 100%; bottom: 100%;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
border-right: 8px solid transparent; border-right: 8px solid transparent;
border-top: 8px solid #303030; border-top: 8px solid #303030;
border-left: 8px solid transparent; border-left: 8px solid transparent;
} }
*/
&.top:after { /*&.top:after {
@include transform-origin(top center); @include transform-origin(top center);
top: 100%; top: 100%;
border-bottom: 8px solid #303030; border-bottom: 8px solid #303030;
border-right: 8px solid transparent; border-right: 8px solid transparent;
border-top: 8px solid transparent; border-top: 8px solid transparent;
border-left: 8px solid transparent; border-left: 8px solid transparent;
} }*/
} }
\ No newline at end of file
styles/form-checkbox.scss
+ 1
- 2
View file @ 58250a72
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
line-height: 1.5; line-height: 1.5;
width: 100%; width: 100%;
text-align: left; text-align: left;
color: $medium;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
border-radius: $radius; border-radius: $radius;
...@@ -139,4 +138,4 @@ ...@@ -139,4 +138,4 @@
display: inline-block !important; display: inline-block !important;
width: auto !important; width: auto !important;
padding-right: 15px !important; padding-right: 15px !important;
} }
\ No newline at end of file
styles/form-select.scss
+ 2
- 12
View file @ 58250a72
...@@ -2,24 +2,14 @@ ...@@ -2,24 +2,14 @@
@import "mixins"; @import "mixins";
.input-select { .input-select {
// background-color: rgba(255,255,255,0.04); background-color: rgba(255,255,255,0.04);
// background-image: url('images/select_arrow.gif'); background-image: url('images/select_arrow.gif');
border-radius: $radius; border-radius: $radius;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
} }
@-moz-document url-prefix() {
select.input{
background-repeat: no-repeat;
background-position: right center;
cursor: pointer;
}
}
select { select {
-webkit-appearance:none;
// -moz-appearance:window;
appearance:none; appearance:none;
padding-left: 0px; padding-left: 0px;
width: 100%; width: 100%;
......
styles/form.scss
+ 0
- 17
View file @ 58250a72
...@@ -113,43 +113,26 @@ select { ...@@ -113,43 +113,26 @@ select {
&.input-white { &.input-white {
background-color: 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); 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 { &.input-light {
background-color: $light; background-color: $light;
color: $medium;
} }
&.input-dark { &.input-dark {
background-color: $darker; background-color: $darker;
color: $medium;
} }
&.input-lighten { &.input-lighten {
background-color: rgba(255,255,255,0.05); background-color: rgba(255,255,255,0.05);
color: $medium !important;
} }
&.input-darken { &.input-darken {
background-color: rgba(0,0,0,0.05); background-color: rgba(0,0,0,0.05);
color: $medium;
} }
&.input-transparent { &.input-transparent {
background-color: 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(); @include input-focus();
......
styles/handles.scss
+ 17
- 24
View file @ 58250a72
...@@ -69,26 +69,27 @@ ...@@ -69,26 +69,27 @@
} }
.handles { .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; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: -1;
right: 0; right: 0;
z-index: 800; z-index: 800;
pointer-events: none; pointer-events: none;
background: rgba(255,255,255,0.1);
&:after{ &:after{
border: 1px dotted rgba(40,140,215,1); border: 4px dotted #000000;
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
height: auto; height: auto;
width: auto; width: auto;
top: -1px; top: 0px;
left: -1px; left: 0px;
right: -1px; right: 0px;
bottom: -1px; bottom: -1px;
} }
} }
...@@ -97,7 +98,7 @@ ...@@ -97,7 +98,7 @@
border: 8px solid rgba(255,255,255,0.5); border: 8px solid rgba(255,255,255,0.5);
&:after{ &:after{
border: 8px dotted rgba(40,140,215,1); border: 8px dotted #000000;
top: -4px; top: -4px;
left: -4px; left: -4px;
right: -4px; right: -4px;
...@@ -332,16 +333,15 @@ ...@@ -332,16 +333,15 @@
pointer-events:auto; pointer-events:auto;
z-index: 2000; z-index: 2000;
position: absolute; position: absolute;
width: 30px !important;
height: 30px !important;
border-radius: 100%; border-radius: 100%;
margin: -15px;
border: 1px solid rgba(0,0,0,0.25);
border: 1px solid black;
margin: -5px;
padding: 4px;
&:hover { &:hover {
background-color: rgba(255,255,255,0.5); background-color: black;
cursor: move; cursor: move;
} }
} }
...@@ -428,15 +428,8 @@ ...@@ -428,15 +428,8 @@
border-style: solid; border-style: solid;
border-width: 10px; border-width: 10px;
border-color: transparent; border-color: transparent;
-webkit-background-clip: padding-box; background-clip: padding-box;
-moz-background-clip: padding-box; transition: all .05s ease-in-out;
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;
} }
div { div {
......
styles/header.scss
+ 2
- 5
View file @ 58250a72
...@@ -31,17 +31,14 @@ ...@@ -31,17 +31,14 @@
} }
.header-left { .header-left {
@include transform-origin(center left);
left: 0; left: 0;
padding-left: 10px; padding-left: 10px;
} }
.header-right { .header-right {
@include transform-origin(center right);
right: 0; right: 0;
padding-right: 10px; padding-right: 20px;
} }
.header-center { .header-center {
@include transform-origin(center center);
width: 100%; width: 100%;
left: 0; left: 0;
right: 0; right: 0;
......
styles/main.scss
+ 0
- 1
View file @ 58250a72
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
@import "mixins"; @import "mixins";
.wrapper { .wrapper {
//@include transition( all 0.25s ease-in-out);
position: relative; position: relative;
margin: auto; margin: auto;
max-width: 1160px; max-width: 1160px;
......
styles/modal.scss
+ 4
- 5
View file @ 58250a72
...@@ -59,9 +59,9 @@ ...@@ -59,9 +59,9 @@
} }
.close { .close {
position: fixed; margin-left: 44px;
margin: 44px 44px; margin-bottom: 44px;
.icon {display: block; } .icon {display: block; }
} }
figure { figure {
...@@ -146,7 +146,6 @@ ...@@ -146,7 +146,6 @@
.modal-header { .modal-header {
padding: 30px 40px; padding: 30px 40px;
position: relative; position: relative;
color: $medium;
} }
.close-search { .close-search {
...@@ -300,4 +299,4 @@ ...@@ -300,4 +299,4 @@
// .btn-block + .btn-block { // .btn-block + .btn-block {
// margin-left: 0; // margin-left: 0;
// } // }
} }
\ No newline at end of file
styles/normalize.scss
+ 1
- 13
View file @ 58250a72
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ /*! 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. // Remove default margin.
// //
...@@ -420,4 +408,4 @@ table { ...@@ -420,4 +408,4 @@ table {
td, td,
th { th {
padding: 0; padding: 0;
} }
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal