Menu
▾
▴
Re: [Exist-development] I am working on adding the responsive elements from bootstrap to the eXist app templates
|
From: Wolfgang M. <wol...@ex...> - 2013-03-02 18:48:18
|
Loren, wouldn't the first step on the way to a responsive design be to get rid of all the fixed widths in the CSS in exist.css? The 940px wide header image also doesn't scale and will never work on a phone I guess. I have thus refactored the stylesheets to remove all fixed widths, split the header and tested a fluid container. There are still some problems, in particular with the menu, but the rest scales ok on my android tablet and phone: https://github.com/wolfgangmm/ShakespeareDemo/commit/dbe1eebf4622f607e37fccdc9794c18fd88efed6 Wolfgang Am Samstag, 2. März 2013 um 17:02 schrieb Loren Cahlander: > Hello Adam and Joe, > > Have you had the opportunity to review my work on the Responsive Bootstrap Template work? I would like to hear any feedback. I will continue working on a 'Responsive eXist Template' you can see that it is working, but it is ugly right now. I am working on making it look like it is suppose to. > > Thanks, > Loren > > On Feb 27, 2013, at 7:31 PM, Loren Cahlander <lor...@gm... (mailto:lor...@gm...)> wrote: > > I had missed adding the following just before the close of the body tag: > > > > <script type="text/javascript" src="resources/js/bootstrap.min.js"/> > > > > Both the template and bstemplate work now. > > > > I just have to get the style elements working so that the navbar matches in the template. The bstemplate looks fine. > > > > I have attached the zip of the bootstrap responsive template. > > > > <bstemplate.zip> > > > > On Feb 27, 2013, at 4:14 PM, Loren Cahlander <lor...@gm... (mailto:lor...@gm...)> wrote: > > > My playground areas are: > > > > > > From the eXist template: http://greatlinkup.com:8080/exist/apps/template/index.html > > > From the bootstrap template: http://greatlinkup.com:8080/exist/apps/bstemplate/index.html > > > > > > I am currently working on the navbar background. Once I get the colors working, then I will work on the dropdown working. > > > > > > on the eXist template, I added @import url('bootstrap-responsive.min.css'); to the exist.css. > > > and added > > > <meta name="viewport" content="width=device-width, initial-scale=1.0"/> > > > > > > to the page.html. > > > > > > > > > > > > On the bootstrap, I changed the head to: > > > > > > <head> > > > <title class="config:app-title">App Title</title> > > > <meta class="config:app-meta"/> > > > <meta name="viewport" content="width=device-width, initial-scale=1.0"/> > > > <link rel="shortcut icon" href="resources/images/favicon.ico"/> > > > <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css"/> > > > <link rel="stylesheet" type="text/css" href="resources/css/bootstrap-responsive.min.css"/> > > > <link rel="stylesheet" type="text/css" href="resources/css/style.css"/> > > > <script type="text/javascript" src="$shared/resources/scripts/jquery/jquery-1.7.1.min.js"/> > > > <script type="text/javascript" src="$shared/resources/scripts/loadsource.js"/> > > > </head> > > > > > > > > > The nav entries for both are: > > > > > > <div class="navbar"> > > > <div class="navbar-inner"> > > > <div class="container"> > > > <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> > > > <span class="icon-bar"></span> > > > <span class="icon-bar"></span> > > > </a> > > > <a class="brand" href="#">eXist-db</a> > > > <div class="nav-collapse collapse navbar-responsive-collapse"> > > > <ul class="nav"> > > > <li class="dropdown"> > > > <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <b class="caret"></b></a> > > > <ul class="dropdown-menu"> > > > <li><a href="#">Action</a></li> > > > <li><a href="#">Another action</a></li> > > > <li><a href="#">Something else here</a></li> > > > <li class="divider"></li> > > > <li class="nav-header">Nav header</li> > > > <li><a href="#">Separated link</a></li> > > > <li><a href="#">One more separated link</a></li> > > > </ul> > > > </li> > > > </ul> > > > <form class="navbar-search pull-right" action=""> > > > <input type="text" class="search-query span2" placeholder="Search"/> > > > </form> > > > </div><!-- /.nav-collapse --> > > > </div> > > > </div><!-- /navbar-inner --> > > > </div> > > > > > > I welcome any feedback from the group. > > > > > > I downloaded from http://twitter.github.com/bootstrap/assets/bootstrap.zip and moved the contents into the appropriate places in both projects resources folder. > > > > > > On Feb 27, 2013, at 3:57 PM, Adam Retter <ad...@ex... (mailto:ad...@ex...)> wrote: > > > > I cant contribute anything apart from enthusiasm I am afraid. Loren > > > > this is a great thing to do :-) > > > > > > > > On 27 February 2013 21:50, Loren Cahlander <lor...@gm... (mailto:lor...@gm...)> wrote: > > > > > The bootstrap template with the responsive additions is at: > > > > > http://greatlinkup.com:8080/exist/apps/bstemplate/index.html > > > > > > > > > > > > > > > On Feb 27, 2013, at 3:48 PM, Joe Wicentowski <jo...@gm... (mailto:jo...@gm...)> wrote: > > > > > > > > > > Hey Loren, > > > > > > > > > > Here is my playground: > > > > > http://greatlinkup.com:8080/exist/apps/template/index.html# > > > > > > > > > > > > > > > Neat - good work so far! > > > > > > > > > > Joe > > > > > > > > > > > > > > > > > > > > ------------------------------------------------------------------------------ > > > > > Everyone hates slow websites. So do we. > > > > > Make your web apps faster with AppDynamics > > > > > Download AppDynamics Lite for free today: > > > > > http://p.sf.net/sfu/appdyn_d2d_feb > > > > > _______________________________________________ > > > > > Exist-development mailing list > > > > > Exi...@li... (mailto:Exi...@li...) > > > > > https://lists.sourceforge.net/lists/listinfo/exist-development > > > > > > > > > > > > > > > > > > > > -- > > > > Adam Retter > > > > > > > > eXist Developer > > > > { United Kingdom } > > > > ad...@ex... (mailto:ad...@ex...) > > > > irc://irc.freenode.net/existdb > > > > > > > > ------------------------------------------------------------------------------ > Everyone hates slow websites. So do we. > Make your web apps faster with AppDynamics > Download AppDynamics Lite for free today: > http://p.sf.net/sfu/appdyn_d2d_feb > > _______________________________________________ > Exist-development mailing list > Exi...@li... (mailto:Exi...@li...) > https://lists.sourceforge.net/lists/listinfo/exist-development |
