From 434e8e46c126e47b82ccbc3cd94910a1f8a60ac6 Mon Sep 17 00:00:00 2001
From: Juan Ferrer Toribio <juan.ferrer.toribio@gmail.com>
Date: Mon, 20 Jul 2015 09:34:43 +0200
Subject: [PATCH] Vista de rejilla para noticiasy formacion
---
.../share/hedera-web/forms/cms/home/style.css | 27 -------------
.../share/hedera-web/forms/cms/home/ui.xml | 4 +-
.../hedera-web/forms/cms/training/style.css | 23 -----------
.../hedera-web/forms/cms/training/ui.xml | 4 +-
package/usr/share/hedera-web/global/style.css | 39 ++++++++++++++++++-
5 files changed, 41 insertions(+), 56 deletions(-)
diff --git a/package/usr/share/hedera-web/forms/cms/home/style.css b/package/usr/share/hedera-web/forms/cms/home/style.css
index 629b19f7..9dac9a27 100755
--- a/package/usr/share/hedera-web/forms/cms/home/style.css
+++ b/package/usr/share/hedera-web/forms/cms/home/style.css
@@ -8,37 +8,10 @@
.column
{
max-width: 120em;
- margin: 0 auto;
- text-align: center;
}
/* New */
-.new-container
-{
- display: inline-block;
- vertical-align: top;
-}/*
-.new-container:nth-child(2n+0)
-{
- float: right;
-}*/
-@media screen and (min-width: 300px)
-{
- .new-container { width: 100%; }
-}
-@media screen and (min-width: 700px)
-{
- .new-container { width: 50%; }
-}
-@media screen and (min-width: 1300px)
-{
- .new-container { width: 33.3%; }
-}
-@media screen and (min-width: 2000px)
-{
- .new-container { width: 25%; }
-}
.new
{
text-align: left;
diff --git a/package/usr/share/hedera-web/forms/cms/home/ui.xml b/package/usr/share/hedera-web/forms/cms/home/ui.xml
index d2239004..03860a67 100755
--- a/package/usr/share/hedera-web/forms/cms/home/ui.xml
+++ b/package/usr/share/hedera-web/forms/cms/home/ui.xml
@@ -7,9 +7,9 @@
</db-model>
</vn-group>
<div id="form" class="home">
- <div class="column" id="news-column">
+ <div class="column mansonry" id="news-column">
<htk-repeater model="news" form-id="new">
- <div class="new-container">
+ <div class="masonry-box">
<div class="new">
<div class="top">
<h2><htk-text form="new" column="title"/></h2>
diff --git a/package/usr/share/hedera-web/forms/cms/training/style.css b/package/usr/share/hedera-web/forms/cms/training/style.css
index 1f6d4e64..262a5f44 100755
--- a/package/usr/share/hedera-web/forms/cms/training/style.css
+++ b/package/usr/share/hedera-web/forms/cms/training/style.css
@@ -8,33 +8,10 @@
.column
{
max-width: 120em;
- margin: 0 auto;
- text-align: center;
}
/* New */
-.new-container
-{
- display: inline-block;
- vertical-align: top;
-}
-@media screen and (min-width: 800px)
-{
- .new-container { width: 100%; }
-}
-@media screen and (min-width: 1000px)
-{
- .new-container { width: 50%; }
-}
-@media screen and (min-width: 1300px)
-{
- .new-container { width: 33.3%; }
-}
-@media screen and (min-width: 2000px)
-{
- .new-container { width: 25%; }
-}
.new
{
text-align: left;
diff --git a/package/usr/share/hedera-web/forms/cms/training/ui.xml b/package/usr/share/hedera-web/forms/cms/training/ui.xml
index add0b6f3..7c199075 100755
--- a/package/usr/share/hedera-web/forms/cms/training/ui.xml
+++ b/package/usr/share/hedera-web/forms/cms/training/ui.xml
@@ -7,9 +7,9 @@
</db-model>
</vn-group>
<div id="form" class="training">
- <div class="column" id="news-column">
+ <div class="column masonry" id="news-column">
<htk-repeater model="news" form-id="new">
- <div class="new-container">
+ <div class="masonry-box">
<div class="new">
<div class="top">
<h2><htk-text form="new" column="title"/></h2>
diff --git a/package/usr/share/hedera-web/global/style.css b/package/usr/share/hedera-web/global/style.css
index 26c5a33b..2f3a26dd 100755
--- a/package/usr/share/hedera-web/global/style.css
+++ b/package/usr/share/hedera-web/global/style.css
@@ -5,11 +5,11 @@
{
* { font-size: 8pt; }
}
-@media screen and (min-width: 1150px)
+@media screen and (min-device-width: 1150px)
{
* { font-size: 10pt; }
}
-@media screen and (min-width: 1850px)
+@media screen and (min-device-width: 1850px)
{
* { font-size: 12pt; }
}
@@ -344,6 +344,41 @@ img.icon
height: 1.5em;
}
+/* Masonry */
+
+.masonry
+{
+ margin: 0 auto;
+ text-align: left;
+}
+.masonry-box
+{
+ width: 100%;
+ display: inline-block;
+ vertical-align: top;
+}
+@media screen and (min-width: 1000px) and (max-width: 1399px)
+{
+ .masonry-box
+ {
+ width: 50%;
+ display: block;
+ float: left;
+ }
+ .masonry-box:nth-child(2n+0)
+ {
+ float: right;
+ }
+}
+@media screen and (min-width: 1400px)
+{
+ .masonry-box { width: 33.3%; }
+}
+@media screen and (min-width: 2000px)
+{
+ .masonry-box { width: 25%; }
+}
+
/* Grid */
.htk-grid