CDCC
/
registro_escolar
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

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 years ago
parent
5c8f5c7ee3
commit
72883c458e
2 changed files with 44 additions and 28 deletions
Split View Show Diff Stats
  1. 4
    0
      static/estilo.css
  2. 40
    28
      templates/forma.html

+ 4
- 0
static/estilo.css View 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 View 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>