Procházet zdrojové kódy

Create 'Add list' and 'Add folder' modals

Adel Qalieh před 13 roky
rodič
revize
8742ccac1c
1 změnil soubory, kde provedl 65 přidání a 1 odebrání
  1. 65 1
      index.html

+ 65 - 1
index.html

@@ -91,7 +91,7 @@
 					<div style="padding: 0px 19px 19px 19px;">
 					<div class="btn-group btn-group-justified" style="padding: 4% 0%">
 						<a href="#addList" data-toggle="modal" class="btn btn-primary">Add List</a>
-						<a href="#" class="btn btn-info">Add Folder</a>
+						<a href="#addFolder" data-toggle="modal" class="btn btn-info">Add Folder</a>
 					</div>
 					<div class="list-group">
 						<a href="#" class="list-group-item active"><span class="badge">4</span>Home</a>
@@ -157,6 +157,70 @@
 	</div>
 </div>
 </div>
+<div class="modals">
+	<div class="modal fade" id="addList">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal">&times;</button>
+					<h4 class="modal-title">Add a List</h4>
+					<small>Use lists to organize projects, goals, and adventures!</small>
+				</div>
+				<div class="modal-body">
+					<form action="submit" class="form-horizontal">
+						<div class="form-group">
+							<label for="listName" class="col-lg-4 control-label">List name</label>
+							<div class="col-lg-8">
+								<input type="text" class="form-control" id="listName" placeholder="List name">
+							</div>
+						</div>
+						<div class="form-group">
+							<label for="listDescription" class="col-lg-4 control-label">Description</label>
+							<div class="col-lg-8">
+								<input type="text" class="form-control" id="listDescription" placeholder="Description">
+							</div>
+						</div>
+					</form>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+					<button type="button" class="btn btn-primary">Create new list</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal fade" id="addFolder">
+		<div class="modal-dialog">
+			<div class="modal-content">
+				<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal">&times;</button>
+					<h4 class="modal-title">Add a Folder</h4>
+					<small>Use folders to group your lists into bigger projects.</small>
+				</div>
+				<div class="modal-body">
+					<form action="submit" class="form-horizontal">
+						<div class="form-group">
+							<label for="listName" class="col-lg-4 control-label">Folder name</label>
+							<div class="col-lg-8">
+								<input type="text" class="form-control" id="folderName" placeholder="Folder name">
+							</div>
+						</div>
+						<div class="form-group">
+							<label for="folderDescription" class="col-lg-4 control-label">Description</label>
+							<div class="col-lg-8">
+								<input type="text" class="form-control" id="folderDescription" placeholder="Description">
+							</div>
+						</div>
+					</form>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+					<button type="button" class="btn btn-primary">Create new folder</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
 <div class="footer">
 	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 	<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>