Mercurial Mercurial > pyams > pyams_content / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Use flexbox in content comments form
authorThierry Florac <tflorac@ulthar.net>
Mon, 01 Feb 2021 13:32:29 +0100
changeset 1453 5b3285e47b62
parent 1452 f5eca01f0a1d
child 1454 c98a34039cf4
Use flexbox in content comments form
src/pyams_content/zmi/resources/css/pyams_content.css file | annotate | diff | comparison | revisions
src/pyams_content/zmi/resources/css/pyams_content.min.css file | annotate | diff | comparison | revisions
src/pyams_content/zmi/resources/less/pyams_content.less file | annotate | diff | comparison | revisions 
--- a/src/pyams_content/zmi/resources/css/pyams_content.css	Mon Feb 01 13:31:22 2021 +0100
+++ b/src/pyams_content/zmi/resources/css/pyams_content.css	Mon Feb 01 13:32:29 2021 +0100
@@ -1,44 +1,23 @@
+.ams-widget.comments {
+  margin-bottom: 0;
+}
 .ams-widget.comments .widget-body {
-  position: fixed;
-  height: calc(100% - 337px);
+  display: flex;
+  flex-direction: column;
 }
 .ams-widget.comments .widget-body .chat-body {
-  position: relative;
-  height: 100%;
+  flex-grow: 1;
+  max-height: calc(100vh - 385px);
+  overflow-y: auto;
 }
 .ams-widget.comments .widget-body .chat-footer {
-  position: fixed;
-  bottom: 10px;
-}
-.ams-widget.comments .widget-body,
-.ams-widget.comments .widget-body .chat-footer {
-  width: calc(100% - 240px);
+  flex-grow: 0;
 }
 @media (max-width: 767px) {
-  .ams-widget.comments .widget-body,
-  .ams-widget.comments .widget-body .chat-footer {
-    width: calc(100% - 10px);
-  }
 }
 @media (min-width: 768px) and (max-width: 979px) {
-  .ams-widget.comments .widget-body,
-  .ams-widget.comments .widget-body .chat-footer {
-    width: calc(100% - 20px);
-  }
-}
-.minified .ams-widget.comments .widget-body,
-.minified .ams-widget.comments .widget-body .chat-footer {
-  width: calc(100% - 65px);
 }
 @media (max-width: 767px) {
-  .minified .ams-widget.comments .widget-body,
-  .minified .ams-widget.comments .widget-body .chat-footer {
-    width: calc(100% - 55px);
-  }
-}
-.hidden-menu .ams-widget.comments .widget-body,
-.hidden-menu .ams-widget.comments .widget-body .chat-footer {
-  width: calc(100% - 30px);
 }
 .pictograms-manager .pictogram {
   border-bottom: 1px solid silver;
@@ -49,4 +28,3 @@
 .sortable.gallery {
   max-height: 550px;
 }
-/*# sourceMappingURL=pyams_content.css.map */
\ No newline at end of file
--- a/src/pyams_content/zmi/resources/css/pyams_content.min.css	Mon Feb 01 13:31:22 2021 +0100
+++ b/src/pyams_content/zmi/resources/css/pyams_content.min.css	Mon Feb 01 13:32:29 2021 +0100
@@ -1,1 +1,1 @@
-.ams-widget.comments .widget-body{position:fixed;height:calc(100% - 337px)}.ams-widget.comments .widget-body .chat-body{position:relative;height:100%}.ams-widget.comments .widget-body .chat-footer{position:fixed;bottom:10px}.ams-widget.comments .widget-body,.ams-widget.comments .widget-body .chat-footer{width:calc(100% - 240px)}@media (max-width:767px){.ams-widget.comments .widget-body,.ams-widget.comments .widget-body .chat-footer{width:calc(100% - 10px)}}@media (min-width:768px) and (max-width:979px){.ams-widget.comments .widget-body,.ams-widget.comments .widget-body .chat-footer{width:calc(100% - 20px)}}.minified .ams-widget.comments .widget-body,.minified .ams-widget.comments .widget-body .chat-footer{width:calc(100% - 65px)}@media (max-width:767px){.minified .ams-widget.comments .widget-body,.minified .ams-widget.comments .widget-body .chat-footer{width:calc(100% - 55px)}}.hidden-menu .ams-widget.comments .widget-body,.hidden-menu .ams-widget.comments .widget-body .chat-footer{width:calc(100% - 30px)}.pictograms-manager .pictogram{border-bottom:1px solid silver}.pictograms-manager .pictogram:last-child{border-bottom:none}.sortable.gallery{max-height:550px}
+.ams-widget.comments{margin-bottom:0}.ams-widget.comments .widget-body{display:flex;flex-direction:column}.ams-widget.comments .widget-body .chat-body{flex-grow:1;max-height:calc(100vh - 385px);overflow-y:auto}.ams-widget.comments .widget-body .chat-footer{flex-grow:0}.pictograms-manager .pictogram{border-bottom:1px solid silver}.pictograms-manager .pictogram:last-child{border-bottom:none}.sortable.gallery{max-height:550px}
--- a/src/pyams_content/zmi/resources/less/pyams_content.less	Mon Feb 01 13:31:22 2021 +0100
+++ b/src/pyams_content/zmi/resources/less/pyams_content.less	Mon Feb 01 13:32:29 2021 +0100
@@ -1,42 +1,19 @@
 .ams-widget.comments {
 
+	margin-bottom: 0;
+
 	.widget-body {
-		position: fixed;
-		height: ~"calc(100% - 337px)";
+		display: flex;
+		flex-direction: column;
 
 		.chat-body {
-			position: relative;
-			height: 100%;
+			flex-grow: 1;
+			max-height: ~"calc(100vh - 385px)";
+			overflow-y: auto;
 		}
 
 		.chat-footer {
-			position: fixed;
-			bottom: 10px;
-		}
-
-		&,
-		.chat-footer {
-			width: ~"calc(100% - 240px)";
-
-			@media (max-width: 767px) {
-				width: ~"calc(100% - 10px)";
-			}
-			@media (min-width: 768px) and (max-width: 979px) {
-				width: ~"calc(100% - 20px)";
-			}
-
-			.minified & {
-				width: ~"calc(100% - 65px)";
-
-				@media (max-width: 767px) {
-					& {
-						width: ~"calc(100% - 55px)";
-					}
-				}
-			}
-			.hidden-menu & {
-				width: ~"calc(100% - 30px)";
-			}
+			flex-grow: 0;
 		}
 	}
 }
pyams/pyams_content