CDCC
/
registro_escolar
Segui 1
Vota 0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Sfoglia il codice sorgente

Cambios al diseño de forma.html 

Cambios al diseño de forma.html para permitir cualquier cantidad de inputs por columnas.
Además, prepara para presentar en celulares.
Carlos J Corrada Bravo 4 anni fa
parent
5c8f5c7ee3
commit
72883c458e
2 ha cambiato i file con 44 aggiunte e 28 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 4
    0
      static/estilo.css
  2. 40
    28
      templates/forma.html

+ 4
- 0
static/estilo.css Vedi File 

@@ -59,6 +59,10 @@ body {
59 59 
   font-family: "arial";
60 60 
   text-align: center;
61 61 
 }
62 
+.form-control-inline
63 
+{
64 
+margin: 12px 0px 0px 0px;
65 
+}
62 66 
 .header{
63 67 
   background-color: var(--colorOscuro);
64 68 
   color: var(--fontClaro);;

+ 40
- 28
templates/forma.html Vedi File 

@@ -43,13 +43,15 @@
43 43 
 </div>
44 44 
 <div class="container" align="center">
45 45 
 <!-- <form class="form" action="/procesaUser" method="POST"> -->
46 
-<form class="form" action="/{{user_type}}/procesaUser" method="POST">
46 
+<form class="form-inline" action="/{{user_type}}/procesaUser" method="POST">
47 47 
       {% raw %}
48 
+<div class="modal-body row">
49 
+  <div class="col-md-6">
48 50 
 <span ng-repeat="entrada in entradas.col1">
49 
-<div>
50 
-	<span class="boton labelForma">
51 
+  <div class="form-group">
52 
+	<label for="{{entrada.name}}" class="boton labelForma">
51 53 
 		{{entrada.label}}
52 
-	</span>
54 
+	</label>
53 55 
 	<span ng-if="entrada.type=='select'">
54 56 
 		<select ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" name="{{entrada.name}}" id="{{entrada.name}}" class="form-control-inline"  style="width: 250px;height: 48px;"
55 57 
       ng-options="opcion.label for opcion in entrada.options track by opcion.id"
 
@@ -58,55 +60,65 @@
58 60 
       ></select>
59 61 
 	</span>
60 62 
 	<span ng-if="entrada.type=='checkbox'">
61 
-		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="{{entrada.type}}" name="{{entrada.name}}" value="1" ng-checked="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
63 
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="{{entrada.type}}" name="{{entrada.name}}" id="{{entrada.name}}" value="1" ng-checked="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
62 64 
 	</span>
63 65 
 	<span ng-if="entrada.type=='tel'">
64 
-		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="tel" placeholder="787-123-4567" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" ng-required="entrada.require" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
66 
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="tel" placeholder="787-123-4567" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" ng-required="entrada.require" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
65 67 
 	</span>
66 68 
 	<span ng-if="entrada.type=='date'">
67 
-		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="date" placeholder="yyyy-MM-dd" pattern="\d{4}-\d{1,2}-\d{1,2}" ng-required="entrada.require" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
69 
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="date" placeholder="yyyy-MM-dd" pattern="\d{4}-\d{1,2}-\d{1,2}" ng-required="entrada.require" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
68 70 
 	</span>
69 71 
 	<span ng-if="entrada.type!='select' && entrada.type!='checkbox' && entrada.type!='tel' && entrada.type!='date'">
70 
-		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" ng-required="entrada.require" class="form-control-inline" type="{{entrada.type}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
71 
-	</span>
72 
-
73 
-  <span ng-if="entradas.col2[$index].name">
74 
-	<span class="boton labelForma">
75 
-		{{entradas.col2[$index].label}}
72 
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" ng-required="entrada.require" class="form-control-inline" type="{{entrada.type}}" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
76 73 
 	</span>
77 
-	<span ng-if="entradas.col2[$index].type=='select'">
78 
-		<select ng-disabled="entradas.col2[$index].disabled" name="{{entradas.col2[$index].name}}" id="{{entradas.col2[$index].name}}" class="form-control-inline"  style="width: 250px;height: 48px;"
79 
-      ng-options="opcion.label for opcion in entradas.col2[$index].options track by opcion.id"
80 
-      ng-model="entradas.col2[$index].value"
81 
-      ng-required="entradas.col2[$index].require"
74 
+  </div>
75 
+</div>
76 
+  <div class="col-md-6">
77 
+<span ng-repeat="entrada in entradas.col2">
78 
+  <div class="form-group">
79 
+	<label for="{{entrada.name}}" class="boton labelForma">
80 
+		{{entrada.label}}
81 
+	</label>
82 
+	<span ng-if="entrada.type=='select'">
83 
+		<select ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" name="{{entrada.name}}" id="{{entrada.name}}" class="form-control-inline"  style="width: 250px;height: 48px;"
84 
+      ng-options="opcion.label for opcion in entrada.options track by opcion.id"
85 
+      ng-model="entrada.value"
86 
+      ng-required="true" required
82 87 
       ></select>
83 88 
 	</span>
84 
-	<span ng-if="entradas.col2[$index].type=='checkbox'">
85 
-			<input ng-disabled="entradas.col2[$index].disabled" class="form-control-inline" type="checkbox" name="{{entradas.col2[$index].name}}" value="1" ng-checked="{{entradas.col2[$index].value}}" style="width: 250px;height: 48px;align:left;">
89 
+	<span ng-if="entrada.type=='checkbox'">
90 
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="{{entrada.type}}" name="{{entrada.name}}" id="{{entrada.name}}" value="1" ng-checked="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
86 91 
 	</span>
87 
-	<span ng-if="entradas.col2[$index].type=='tel'">
88 
-		<input ng-disabled="entradas.col2[$index].disabled" class="form-control-inline" type="tel" placeholder="787-123-4567" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" ng-required="entradas.col2[$index].require" name="{{entradas.col2[$index].name}}" value="{{entradas.col2[$index].value}}" style="width: 250px;height: 48px;align:left;">
92 
+	<span ng-if="entrada.type=='tel'">
93 
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="tel" placeholder="787-123-4567" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" ng-required="entrada.require" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
89 94 
 	</span>
90 
-	<span ng-if="entradas.col2[$index].type=='date'">
91 
-		<input ng-disabled="entradas.col2[$index].disabled" class="form-control-inline" type="date" placeholder="yyyy-MM-dd" pattern="\d{4}-\d{1,2}-\d{1,2}" ng-required="entradas.col2[$index].require" name="{{entradas.col2[$index].name}}" value="{{entradas.col2[$index].value}}" style="width: 250px;height: 48px;align:left;">
95 
+	<span ng-if="entrada.type=='date'">
96 
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" class="form-control-inline" type="date" placeholder="yyyy-MM-dd" pattern="\d{4}-\d{1,2}-\d{1,2}" ng-required="entrada.require" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
92 97 
 	</span>
93 
-	<span ng-if="entradas.col2[$index].type!='select' && entradas.col2[$index].type!='checkbox' && entradas.col2[$index].type!='tel' && entradas.col2[$index].type!='date'">
94 
-		<input ng-disabled="entradas.col2[$index].disabled" class="form-control-inline" type="{{entradas.col2[$index].type}}" ng-required="entradas.col2[$index].require" name="{{entradas.col2[$index].name}}" value="{{entradas.col2[$index].value}}" style="width: 250px;height: 48px;align:left;">
98 
+	<span ng-if="entrada.type!='select' && entrada.type!='checkbox' && entrada.type!='tel' && entrada.type!='date'">
99 
+		<input ng-disabled="entrada.disabled" tabindex="{{entrada.tabindex}}" ng-required="entrada.require" class="form-control-inline" type="{{entrada.type}}" id="{{entrada.name}}" name="{{entrada.name}}" value="{{entrada.value}}" style="width: 250px;height: 48px;align:left;">
95 100 
 	</span>
96 
-  </span>
101 
+  </div>
102 
+</div>
103 
+</div>
104 
+
97 105 
 </div>
98 106 
 </span>
107 
+</div>
99 108 
       {% endraw %}
100 109 
 <input type="hidden" name="id" value="{{id}}">
101 110 
 <input type="hidden" name="accion" value="{{accion}}">
102 111 
 <input type="hidden" name="tipo" value="{{tipo}}">
103 112 
       {% raw %}
113 
+<div class="modal-body row">
114 
+  <div class="col-md-12" align="center">
104 115 
 <span ng-if="abled">
105 116 
  <input class="boton labelForma" type="submit">
106 117 
 </span>
118 
+</div>
119 
+</div>
107 120 
       {% endraw %}
108 121 
 </form>
109 122 
 </div>
110 
-</div>
111 123 
 </body>
112 124 
 </html>