Applying Bootstrap styling to profile view.

cebartling · Apr 27, 2012 · ac5fe49 · ac5fe49
1 parent 44c9d1a
commit ac5fe49
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 57 deletions.
diff --git a/backbone-photo-gallery/grails-app/conf/UrlMappings.groovy b/backbone-photo-gallery/grails-app/conf/UrlMappings.groovy
@@ -2,7 +2,7 @@ class UrlMappings {
 
     static mappings = {
 
-        "/profiles"(controller: 'profile', action: 'index', parseRequest: false)
+        "/profiles"(controller: 'profile', action: 'list', parseRequest: false)
 
         "/profiles/$id"(controller: "profile", parseRequest: true) {
             action = [GET: "show", PUT: "update", DELETE: "delete", POST: "save"]

diff --git a/...ils-app/controllers/cebartling/backbone/photogallery/controllers/ProfileController.groovy b/...ils-app/controllers/cebartling/backbone/photogallery/controllers/ProfileController.groovy
@@ -6,6 +6,9 @@ import grails.converters.JSON
 class ProfileController {
 
     def index() {
+    }
+
+    def list() {
         log.info "Retrieving list of profiles..."
         def profiles = Profile.list()
         withFormat {

diff --git a/backbone-photo-gallery/grails-app/views/index.gsp b/backbone-photo-gallery/grails-app/views/index.gsp
@@ -1,24 +1,7 @@
 <html>
 <head>
     <meta name="layout" content="main"/>
-    <r:require modules="profile"/>
-
-    <!-- Templates -->
-    <script type="text/template" id="tpl-profile-list-item">
-        <a href='#profiles/{{ id }}'>{{ fullname }}</a>
-    </script>
-
-    <script type="text/template" id="tpl-profile-details">
-        <div class="form-left-col">
-            <label>Id:</label>
-            <input type="text" id="profileId" name="id" value="{{ id }}" disabled/>
-            <label>Full name:</label>
-            <input type="text" id="fullname" name="fullname" value="{{ fullname }}" required/>
-            <label>Username:</label>
-            <input type="text" id="username" name="username" value="{{ username }}"/>
-        </div>
-    </script>
-
+    <r:require modules="core"/>
 </head>
 
 <body>
@@ -32,23 +15,5 @@
     </div>
 </div>
 
-<div id="profilesContainer">
-
-</div>
-
-<div id="profileDetailsContainer"></div>
-
-%{--<g:if test="${command.hasErrors()}">--}%
-%{--<div class="alert alert-error">--}%
-%{--<a class="close" data-dismiss="alert">×</a>--}%
-%{--<strong>Oh snap!</strong>--}%
-%{--&nbsp;&nbsp;--}%
-%{--There seems to be some things amiss in the form below.  Please correct the following issues and resubmit the form.--}%
-%{--<br/>--}%
-%{--<br/>--}%
-%{--<g:renderErrors bean="${command}"/>--}%
-%{--</div>--}%
-%{--</g:if>--}%
-
 </body>
 </html>
diff --git a/backbone-photo-gallery/grails-app/views/layouts/main.gsp b/backbone-photo-gallery/grails-app/views/layouts/main.gsp
@@ -35,26 +35,28 @@
                 <span class="icon-bar"></span>
             </a>
             <a class="brand" href="${request.contextPath}">Photo Gallery</a>
-            %{--<div class="nav-collapse">--}%
-            %{--<ul class="nav">--}%
-            %{--<li class="dropdown">--}%
-            %{--<a href="#" class="dropdown-toggle" data-toggle="dropdown">Profile <b class="caret"></b></a>--}%
-            %{--<ul class="dropdown-menu">--}%
-            %{--<li><a href="${createLink(controller: 'campaign', action: 'listing')}">Campaign listing</a></li>--}%
-            %{--<li><a href="${createLink(controller: 'campaign', action: 'editor')}">Add campaign</a></li>--}%
-            %{--</ul>--}%
-            %{--</li>--}%
-            %{--</ul>--}%
-            %{--</div><!--/.nav-collapse -->--}%
-            %{--<div class="btn-group pull-right">--}%
-            %{--<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">--}%
-            %{--<i class="icon-user icon-white"></i> <sec:loggedInUserInfo field="username" />--}%
-            %{--<span class="caret"></span>--}%
-            %{--</a>--}%
-            %{--<ul class="dropdown-menu">--}%
-            %{--<li><a href="${createLink(controller: 'logout', action: 'index')}">Sign Out</a></li>--}%
-            %{--</ul>--}%
-            %{--</div>--}%
+
+            <div class="nav-collapse">
+                <ul class="nav">
+                    <li class="dropdown">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration
+                            <b class="caret"></b>
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li><a href="${createLink(controller: 'profile', action: 'index')}">Profiles</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </div><!--/.nav-collapse -->
+        %{--<div class="btn-group pull-right">--}%
+        %{--<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">--}%
+        %{--<i class="icon-user icon-white"></i> <sec:loggedInUserInfo field="username" />--}%
+        %{--<span class="caret"></span>--}%
+        %{--</a>--}%
+        %{--<ul class="dropdown-menu">--}%
+        %{--<li><a href="${createLink(controller: 'logout', action: 'index')}">Sign Out</a></li>--}%
+        %{--</ul>--}%
+        %{--</div>--}%
         </div>
     </div>
 </div>

diff --git a/backbone-photo-gallery/grails-app/views/profile/index.gsp b/backbone-photo-gallery/grails-app/views/profile/index.gsp
@@ -0,0 +1,64 @@
+<html>
+<head>
+    <meta name="layout" content="main"/>
+    <r:require modules="profile"/>
+
+    <!-- Templates -->
+    <script type="text/template" id="tpl-profile-list-item">
+        <a href='#profiles/{{ id }}'>{{ fullname }}</a>
+    </script>
+
+    <script type="text/template" id="tpl-profile-details">
+
+        <form class="form-horizontal">
+            <fieldset>
+                <legend>Profile Details</legend>
+
+                <div class="control-group">
+                    <label class="control-label" for="id">ID:</label>
+
+                    <div class="controls">
+                        <input type="text" class="input-small" id="id" name="id" disabled="disabled" value="{{ id }}">
+
+                        %{--<p class="help-block">Supporting help text</p>--}%
+                    </div>
+                </div>
+
+                <div class="control-group">
+                    <label class="control-label" for="fullname">Full name:</label>
+
+                    <div class="controls">
+                        <input type="text" class="input-medium" id="fullname" name="fullname" value="{{ fullname }}">
+
+                        %{--<p class="help-block">Supporting help text</p>--}%
+                    </div>
+                </div>
+
+                <div class="control-group">
+                    <label class="control-label" for="id">Username:</label>
+
+                    <div class="controls">
+                        <input type="text" class="input-medium" id="username" name="username" value="{{ username }}">
+
+                        %{--<p class="help-block">Supporting help text</p>--}%
+                    </div>
+                </div>
+            </fieldset>
+        </form>
+
+    </script>
+
+</head>
+
+<body>
+
+<h1>Profiles</h1>
+
+<div class="row-fluid">
+    <div id="profilesContainer" class="well span3"></div>
+
+    <div id="profileDetailsContainer" class="well span7"></div>
+</div>
+
+</body>
+</html>