improved timer page on mobiles. fix #8

Author: puthre

css/style.css

@@ -88,6 +88,7 @@ html[xmlns] .clearfix { display: block;}
 .wi-child-element {
 	display: flex;
 	border-bottom: #eee solid 1px;
+	flex-direction:row;
 }
 .wi-child-duration {
     padding: 10px;
@@ -527,4 +528,38 @@ td.ε_row {
 
 .select-project {
 	/*font-size: 24px;*/
+}
+.tags-select {
+	width:200px;
+}
+.project-select {
+	width:200px;
+}
+@media screen and (max-width: 700px) {
+	.wi-child-element {
+		display: inline-flex;
+		flex-direction:column;
+		width: 100%;
+	}
+	.wi-trash {
+		display: inline;
+	}
+	.wi-child-duration {
+		text-align: left;
+	}
+	.wi-child{
+		border-bottom: 2px var(--color-background-darker) solid;
+	}
+	.tags-select {
+		width:auto;
+	}
+	.project-select {
+		width:auto;
+	}
+	.wi-play{
+		display:table;
+		margin: 0 auto;
+	}
+	
+
 }

js/src/timer.js

@@ -5,7 +5,7 @@ var moment = require("moment");
 require("jqueryui");
 //require("jqueryui/jquery-ui.css");
 //import 'select2/dist/js/select2.full.js'
-import 'select2/dist/js/select2.js'
+import 'select2/dist/js/select2.full.js'
 require('select2/dist/css/select2.css');
 require('daterangepicker/daterangepicker.css');
 require('../../css/style.css');
@@ -424,7 +424,7 @@ function() {
 
 
                     $(this).select2({
-                        width: '200px',
+                        containerCssClass:'project-select',
                         escapeMarkup : function(markup) { return markup; },
                         placeholder: "<span class='fas fa-folder'></span>",
                         allowClear: true,
@@ -483,7 +483,7 @@ function() {
 
                   $(this).select2({
                     tags: true,
-                    width: '200px',
+                    containerCssClass:'tags-select',
                     placeholder: "Select tags...",
                     allowClear: true,