CSS: handle box size by media (no JS)

Leonardo Merlin
1 parent d833a19e
Showing 2 changed files with 58 additions and 3 deletions Show diff stats
src/app/components/programa/programa.scss
src/app/components/programas/programas.directive.js
@@ -42,19 +42,73 @@ $darken: 15%;
  
     &--title {
  
-        padding: 0 $program-box-space;
-        margin: 0 0 10px 0;
+        padding: $program-box-space;
+
         h1 {
             font-size: 18px;
             font-weight: bold;
-            height: 60px;
             display: table-cell;
             vertical-align: middle;
+            margin: 10px 0;
+
+            // Altura das linhas do abstract
+            $hLine: 20px;
+            
+            height: $hLine * 2; // default
+
+            @media (max-width: $screen-xs) {
+                // height: $hLine * 3;
+                height: auto;
+            }
+
+            @media (min-width: $screen-xs + 1) {
+                // height: $hLine * 2;
+                height: auto;
+            }
+
+            @media (min-width: $screen-sm + 1) {
+                height: $hLine * 2;
+            }
+
+            @media (min-width: $screen-md + 1) {
+                height: $hLine * 2;
+            }
         }
     }
  
     &--abstract {
         padding: 0 $program-box-space;
+        display: table-cell;
+        vertical-align: middle;
+        
+        // Altura das linhas do abstract
+        $pLine: 20px;
+        // 1 linha: 19px -> 20
+        // 2 linhas: 38px -> 40
+        // 3 linhas: 57px -> 60
+        // 4 linhas: 76px -> 80
+
+        height: $pLine * 2; // default
+        
+        @media (max-width: $screen-xs) {
+            // height: $pLine * 4;
+            height: auto;
+        }
+
+        @media (min-width: $screen-xs + 1) {
+            // height: $pLine * 3;
+            height: auto;
+        }
+
+        @media (min-width: $screen-sm + 1) {
+            height: $pLine * 4;
+        }
+
+        @media (min-width: $screen-md + 1) {
+            height: $pLine * 3;
+        }
+
+        p { margin: 0; }
     }
  
     &--button {
@@ -116,6 +116,7 @@
       $event.stopPropagation();
  
       vm.resetFilterValues();
+      vm.limitTo = vm.programs.length;
     };
  
     // function ProgramaListLinker (scope, element, attrs) {
...	...	@@ -42,19 +42,73 @@ $darken: 15%;
42	42
43	43	&--title {
44	44
45		- padding: 0 $program-box-space;
46		- margin: 0 0 10px 0;
	45	+ padding: $program-box-space;
	46	+
47	47	h1 {
48	48	font-size: 18px;
49	49	font-weight: bold;
50		- height: 60px;
51	50	display: table-cell;
52	51	vertical-align: middle;
	52	+ margin: 10px 0;
	53	+
	54	+ // Altura das linhas do abstract
	55	+ $hLine: 20px;
	56	+
	57	+ height: $hLine * 2; // default
	58	+
	59	+ @media (max-width: $screen-xs) {
	60	+ // height: $hLine * 3;
	61	+ height: auto;
	62	+ }
	63	+
	64	+ @media (min-width: $screen-xs + 1) {
	65	+ // height: $hLine * 2;
	66	+ height: auto;
	67	+ }
	68	+
	69	+ @media (min-width: $screen-sm + 1) {
	70	+ height: $hLine * 2;
	71	+ }
	72	+
	73	+ @media (min-width: $screen-md + 1) {
	74	+ height: $hLine * 2;
	75	+ }
53	76	}
54	77	}
55	78
56	79	&--abstract {
57	80	padding: 0 $program-box-space;
	81	+ display: table-cell;
	82	+ vertical-align: middle;
	83	+
	84	+ // Altura das linhas do abstract
	85	+ $pLine: 20px;
	86	+ // 1 linha: 19px -> 20
	87	+ // 2 linhas: 38px -> 40
	88	+ // 3 linhas: 57px -> 60
	89	+ // 4 linhas: 76px -> 80
	90	+
	91	+ height: $pLine * 2; // default
	92	+
	93	+ @media (max-width: $screen-xs) {
	94	+ // height: $pLine * 4;
	95	+ height: auto;
	96	+ }
	97	+
	98	+ @media (min-width: $screen-xs + 1) {
	99	+ // height: $pLine * 3;
	100	+ height: auto;
	101	+ }
	102	+
	103	+ @media (min-width: $screen-sm + 1) {
	104	+ height: $pLine * 4;
	105	+ }
	106	+
	107	+ @media (min-width: $screen-md + 1) {
	108	+ height: $pLine * 3;
	109	+ }
	110	+
	111	+ p { margin: 0; }
58	112	}
59	113
60	114	&--button {
...	...
...	...	@@ -116,6 +116,7 @@
116	116	$event.stopPropagation();
117	117
118	118	vm.resetFilterValues();
	119	+ vm.limitTo = vm.programs.length;
119	120	};
120	121
121	122	// function ProgramaListLinker (scope, element, attrs) {
...	...