ActionItem0: making an usable template

git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@322 3f533792-8f58-4932-b0fe-aaf55b0a4547

ActionItem0: making an usable template
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@322 3f533792-8f58-4932-b0fe-aaf55b0a4547
AntonioTerceiro
1 parent 71a7cfbd
Showing 2 changed files with 88 additions and 3 deletions Show diff stats
app/controllers/edit_template_controller.rb
public/designs/templates/default/stylesheets/style.css
@@ -9,6 +9,9 @@ class EditTemplateController &lt; ApplicationController
     }
   end
+  # FIXME: is this really needed? Why should we let the user say how a
+  # particular box must be displayed? IMO the box itself must have authority to
+  # say how it wants to be drawn -- terceiro
   def block_helper_types
     { 
       'list_content' => _("Simple List Content"), 
@@ -6,6 +6,14 @@ body {
   margin: 0px;
 }
+#spinner {
+  z-index: 1000;
+  position: absolute;
+  left: 50%;
+  margin-left: -16px;
+  top: 200px;
+}
+
 #header {
   border-bottom: 1px solid black;
   padding: 0.5em;
@@ -35,10 +43,84 @@ body {
 }
 #box_1, #box_2, #box_3 {
-  border: 1px solid black;
   margin: 10px;
+  padding: 0.5em;
+  background: white;
+}
+
+/* Box 1 is the main area */
+#box_1 {
+  border: 1px solid black;
+  margin-left: 220px;
+  margin-right: 220px;
+}
+
+/* Box 2 on the left side */
+#box_2 {
+  width: 200px;
+  position: absolute;
+  left: 0px;
+  top: 57px;
+  padding: 0px;
+}
+
+/* Box 3 on the right side */
+#box_3 {
+  width: 200px;
+  position: absolute;
+  right: 0px;
+  top: 57px;
+  padding: 0px;
+}
+
+/* blocks for box_2 and box_3 */
+#box_2 div.block, #box_3 div.block {
+  border: 1px solid black;
+  margin-bottom: 1em;
+}
+
+/* design_editor stuff */
+#design_editor #box_2, 
+#design_editor #box_3 {
+  top: 88px;
+}
+
+#design_editor #box_1 div,
+#design_editor #box_2 div,
+#design_editor #box_3 div {
+  border: 1px solid black;
+  list-style: none;
+  margin: 0px;
+  padding: 2px;
+  margin-top: 3px;
+}
+
+#design_editor #design_editor_selectors {
+  text-align: center;
+  border: 1px solid black;
+}
+#design_editor #design_editor_selectors ul {
+  padding: 2px;
+  margin: 2px;
+}
+#design_editor #design_editor_selectors li {
+  list-style: none;
+  display: inline;
+}
+
+#design_editor .hover {
+  border: 1px dashed black;
+  background: #ffd;
+}
+
+#design_editor ul {
+  padding: 2px;
+  margin: 2px;
 }
-#box_1 li, #box_2 li, #box_3 li {
- border: 1px solid black;
+#design_editor li {
+  padding: 2px;
+  margin: 2px;
+  list-style: none;
+  border: 1px solid gray;
 }
	@@ -6,6 +6,14 @@ body {		@@ -6,6 +6,14 @@ body {
6	margin: 0px;	6	margin: 0px;
7	}	7	}
8		8
		9	+#spinner {
		10	+ z-index: 1000;
		11	+ position: absolute;
		12	+ left: 50%;
		13	+ margin-left: -16px;
		14	+ top: 200px;
		15	+}
		16	+
9	#header {	17	#header {
10	border-bottom: 1px solid black;	18	border-bottom: 1px solid black;
11	padding: 0.5em;	19	padding: 0.5em;
	@@ -35,10 +43,84 @@ body {		@@ -35,10 +43,84 @@ body {
35	}	43	}
36		44
37	#box_1, #box_2, #box_3 {	45	#box_1, #box_2, #box_3 {
38	- border: 1px solid black;
39	margin: 10px;	46	margin: 10px;
		47	+ padding: 0.5em;
		48	+ background: white;
		49	+}
		50	+
		51	+/* Box 1 is the main area */
		52	+#box_1 {
		53	+ border: 1px solid black;
		54	+ margin-left: 220px;
		55	+ margin-right: 220px;
		56	+}
		57	+
		58	+/* Box 2 on the left side */
		59	+#box_2 {
		60	+ width: 200px;
		61	+ position: absolute;
		62	+ left: 0px;
		63	+ top: 57px;
		64	+ padding: 0px;
		65	+}
		66	+
		67	+/* Box 3 on the right side */
		68	+#box_3 {
		69	+ width: 200px;
		70	+ position: absolute;
		71	+ right: 0px;
		72	+ top: 57px;
		73	+ padding: 0px;
		74	+}
		75	+
		76	+/* blocks for box_2 and box_3 */
		77	+#box_2 div.block, #box_3 div.block {
		78	+ border: 1px solid black;
		79	+ margin-bottom: 1em;
		80	+}
		81	+
		82	+/* design_editor stuff */
		83	+#design_editor #box_2,
		84	+#design_editor #box_3 {
		85	+ top: 88px;
		86	+}
		87	+
		88	+#design_editor #box_1 div,
		89	+#design_editor #box_2 div,
		90	+#design_editor #box_3 div {
		91	+ border: 1px solid black;
		92	+ list-style: none;
		93	+ margin: 0px;
		94	+ padding: 2px;
		95	+ margin-top: 3px;
		96	+}
		97	+
		98	+#design_editor #design_editor_selectors {
		99	+ text-align: center;
		100	+ border: 1px solid black;
		101	+}
		102	+#design_editor #design_editor_selectors ul {
		103	+ padding: 2px;
		104	+ margin: 2px;
		105	+}
		106	+#design_editor #design_editor_selectors li {
		107	+ list-style: none;
		108	+ display: inline;
		109	+}
		110	+
		111	+#design_editor .hover {
		112	+ border: 1px dashed black;
		113	+ background: #ffd;
		114	+}
		115	+
		116	+#design_editor ul {
		117	+ padding: 2px;
		118	+ margin: 2px;
40	}	119	}
41		120
42	-#box_1 li, #box_2 li, #box_3 li {
43	- border: 1px solid black;	121	+#design_editor li {
		122	+ padding: 2px;
		123	+ margin: 2px;
		124	+ list-style: none;
		125	+ border: 1px solid gray;
44	}	126	}