Added some responsive css

2 files changed, 92 insertions, 317 deletions

diff --git a/css/main.css b/css/main.css
deleted file mode 100644
index 098af789..00000000
--- a/css/main.css
+++ /dev/null
@@ -1,304 +0,0 @@
-h1 {
- font-size:1.8em;
- margin-bottom:5px
-}
-#app header {
- padding-top:44px
-}
-#controls {
- width:inherit;
- z-index:120;
- display:flex;
- align-items:center;
- position:inherit;
- width:100% !important
-}
-#controls #breadcrump {
- min-width:350px
-}
-#controls h2 {
- margin-top:12px
-}
-.table {
- position:relative
-}
-#app-sidebar {
- display:flex;
- flex-direction:column
-}
-#app-sidebar .share,#app-sidebar h2,#app-sidebar .comments {
- padding:15px
-}
-.row:after {
- content:".";
- display:block;
- height:0;
- clear:both;
- visibility:hidden
-}
-.col-100 {
- width:100%;
- padding:0px 15px
-}
-.col-50 {
- width:50%;
- float:left;
- padding:0px 15px
-}
-.col-70 {
- width:65%;
- float:left;
- padding:0px 15px
-}
-.col-30 {
- width:35%;
- float:left;
- padding:0px 15px
-}
-@media (max-width:992px) {
- .col-70,.col-30,.col-50 {
-  float:none;
-  width:100%
- }
-}
-input[type="text"] {
- display:block;
- width:100%
-}
-textarea {
- min-width:100%;
- max-width:100%
-}
-.form-actions {
- padding:15px
-}
-.goto_poll {
- width:100%
-}
-div.new_poll {
- width:100%
-}
-input.table_button {
- background-color:transparent;
- border:none;
- height:12px;
- width:12px;
- vertical-align:middle
-}
-div.scroll_div {
- width:100%;
- overflow-x:auto;
- overflow-y:hidden
-}
-div.scroll_div_dialog {
- width:100%;
- height:250px;
- overflow-y:auto
-}
-.bordered {
- border-left:1px solid #fff
-}
-tbody th {
- text-align:left
-}
-td.td_shown {
- visibility:visible
-}
-.td_hidden {
- visibility:hidden;
- visibility:collapse
-}
-.td_selected {
- background-color:#82de82
-}
-.td_deselected {
- background-color:white
-}
-.cl_with_border td {
- padding-right:15px;
- padding:1px;
- border-width:1px;
- border-style:solid;
- border-color:gray;
- -moz-border-radius:initial;
- text-align:center;
- vertical-align:bottom;
- cursor:pointer
-}
-.scrollable_table {
- table-layout:fixed
-}
-.desc {
- color:#888
-}
-.wordwrap {
- white-space:normal;
- word-wrap:break-word;
- word-break:normal
-}
-.cl_title {
- font-size:2em
-}
-.input_title {
- display:block;
- font-size:1.2em;
- margin-top:5px
-}
-.padded td {
- padding:10px
-}
-.userNameImg {
- vertical-align:middle;
- margin-right:5px;
- border-radius:16px
-}
-.noAvatar {
- color:#fff;
- font-weight:bold;
- text-align:center;
- line-height:32px;
- width:32px;
- height:32px;
- font-size:19px;
- display:inline-block
-}
-.cl_time_display {
- background-color:aqua;
- cursor:pointer
-}
-.cl_date_time_header:hover {
- background-color:red
-}
-.cl_hour,.cl_min {
- cursor:pointer;
- background-color:white
-}
-.cl_hour_selected,.cl_min_selected {
- background-color:#82de82
-}
-.cl_poll_url,.cl_date_time_header {
- cursor:pointer
-}
-.cl_pad_left {
- padding-left:30px
-}
-.cl_del_item {
- cursor:pointer;
- padding:0px 5px 0px 5px
-}
-.cl_del_item:hover {
- background-color:#ffccca
-}
-.cl_maybe:before,.cl_maybe:after {
- content:"?"
-}
-.win_row {
- color:#5ef56c;
- font-size:2em
-}
-.cl_user_comments {
- table-layout:fixed
-}
-.cl_user_comments td {
- text-align:left
-}
-.cl_user_comments th {
- word-wrap:break-word;
- vertical-align:top;
- text-align:center
-}
-.user_comment {
- font-size:0.9em
-}
-.user_comment {
- padding-bottom:10px
-}
-.user_comment_text {
- margin-top:-5px;
- margin-left:5px
-}
-#id_tab_total {
- height:2em;
- width:100%;
- text-align:center
-}
-#id_tab_total tr:nth-child(even) {
- color:#000
-}
-#id_cal_table td {
- padding:10px
-}
-#id_time_table td {
- padding:8px
-}
-#id_poss_table td {
- padding-left:2px
-}
-.input-group {
- position:relative;
- display:table;
- border-collapse:separate;
- width:100%
-}
-.input-group > input,.input-group-addon,.input-group-btn {
- display:table-cell
-}
-.input-group-addon {
- padding:6px 12px;
- font-size:14px;
- line-height:1;
- color:#555;
- text-align:center;
- background-color:#eee;
- border:1px solid #ccc;
- border-radius:4px;
- white-space:nowrap;
- vertical-align:middle;
- width:1%
-}
-.input-group-addon input[type="checkbox"] {
- margin:0
-}
-.input-group-btn {
- vertical-align:top
-}
-.input-group-btn .btn {
- height:31.25px;
- border:1px solid #ddd;
- margin:0;
- border-radius:3px;
- vertical-align:middle;
- display:block;
- width:100%
-}
-.input-group > input {
- position:relative;
- z-index:2;
- float:left;
- width:100%;
- margin:0
-}
-.input-group input:first-child,.input-group .input-group-btn:first-child .btn,.input-group-addon:first-child {
- border-top-right-radius:0;
- border-bottom-right-radius:0
-}
-.input-group input:last-child,.input-group .input-group-btn:last-child .btn,.input-group-addon:last-child {
- border-top-left-radius:0;
- border-bottom-left-radius:0
-}
-.input-group .input-group-btn:first-child .btn,.input-group-addon:first-child {
- border-right:none
-}
-.input-group .input-group-btn:last-child .btn,.input-group-addon:last-child {
- border-left:none
-}
-.alert-info {
- margin-left:50%;
- transform:translateX(-50%);
- width:auto;
- padding:5px 15px;
- text-align:center;
- border:1px solid #1d2d44;
- border-top:0;
- border-radius:0 0 3px 3px
-}
diff --git a/css/vote.scss b/css/vote.scss
index 2a73ab92..919a0546 100644
--- a/css/vote.scss
+++ b/css/vote.scss
@@ -4,14 +4,15 @@ $bg_unvoted: #fff4c8;
 $bg_yes: #ebf5d6;
 
 $fg_no: #f45573;
-$fg_maybe: #fff3cd;
-$fg_unvoted: #fff3cd;
+$fg_maybe: #f0db98;
+$fg_unvoted: #f0db98;
 $fg_yes: #49bc49;
 
 
 $bg_current_user: #f7f7f7;
 $fg_current_user: #0082c9;
 $border_current_user: 2px solid;
+$border_user: 1px solid #ddd;
 
 
 .votings {
@@ -26,7 +27,7 @@ $border_current_user: 2px solid;
 	flex-grow: 1;
 	align-items: center;
 	&.user {
-		border-top: 1px solid #ddd;
+		border-top: $border_user;
 		// height: 44px;
 	}
 	&.user, &.header, &.total, &.best{
@@ -59,14 +60,17 @@ $border_current_user: 2px solid;
 }
 
 .current-user {
-
+	.vote {
+		border: 2px solid;
+		border-radius: 4px;
+		}
 	&.row {
-		background-color: #e6f1f8;
-		border-top: 2px solid #0082c9;
+ 		background-color: #e6f1f8;
+/*		border-top: 2px solid #0082c9;
 		border-bottom: 2px solid #0082c9;
 		border-left: 0px solid #0082c9;
 		border-right: 0px solid #0082c9;
-	}
+ */	}
 
 	.toggle {
 		&.yes {
@@ -120,6 +124,7 @@ $border_current_user: 2px solid;
 	&.yes {
 		background-color: $bg_yes;
 		color: $fg_yes;
+		border-color: $fg_yes;
 		.vote {
 			background-image: url('../img/yes-vote.svg');
 		}
@@ -132,6 +137,7 @@ $border_current_user: 2px solid;
 	&.no {
 		background-color: $bg_no;
 		color: $fg_no;
+		border-color: $fg_no;
 		.vote {
 			background-image: url('../img/no-vote.svg');
 		}
@@ -143,6 +149,7 @@ $border_current_user: 2px solid;
 	&.maybe {
 		background-color: $bg_maybe;
 		color: $fg_maybe;
+		border-color: $fg_maybe;
 		.vote {
 			background-image: url('../img/maybe-vote.svg');
 		}
@@ -154,9 +161,7 @@ $border_current_user: 2px solid;
 	&.unvoted {
 		background-color: $bg_unvoted;
 		color: $fg_unvoted;
-		div {
-			color: $fg_unvoted;
-		}
+		border-color: $fg_unvoted;
 	}
 
 }
@@ -283,9 +288,82 @@ $border_current_user: 2px solid;
 }
 
 
-@media all and (max-width: (640px) ) {
+@media all and (max-width: (940px) ) {
+
+.table { 
+	display: flex;
+}
+
+.first {
+	height: 44px;
+	width: unset;
+}
+		
+.row {
+	flex-direction: column;
+	&.user {
+		display: none;
+		width: 44px;
+		padding:0;
+		.poll-cell, .toggle-all  {
+			width: 40px;
+			height: 40px;
+		}
+		&.current-user {
+		  display: flex;
+		  > ul {
+			}
+			.user-cell {
+				display: none;
+			}
+		}
+	}
+
+	&.header {
+		flex-grow: 1;
+		width:120px;
+	}
+	&.total {
+		flex-grow: 0;
+		width:40px;
+	}
+	&.total, &.best {
+		flex-grow: 0;
+		width:80px;
+	}
+}
+
+
+.column {
+	&.table-body {
+		flex-grow: 0;
+		width:60px;
+	}
+	&.total {
+		width:80px;
+	}
+}
 
-	.table {
+.vote-option, .time-slot, .poll-cell, .win_row, .column.total, .toggle-all {
+	.vote, .toggle {
+		height: 100%;
+		width: 100%;
+	}
+}
+
+
+#options.row {
+	flex-direction: column;
+	width: 100%;
+	.vote-option {
+		align-items: baseline;
+		width: 100%;
+		border-top: $border_user;
+	}
+}
+
+
+/* 	.table {
 		flex-direction: row;
 		.column{
 			flex-direction: row;
@@ -316,4 +394,5 @@ $border_current_user: 2px solid;
 			}
 		}
 	}
-}
+ */
+ }