Department database design (3) - change front page interface

http://localhost/ubc_surgery_pub/demosite/index.php
http://139.173.32.21/ubc_surgery_pub/demosite/
C:\Users\jiansen\Desktop\CAS\jiansen_dir\www_cesei0_mobile\ubc_surgery_pub\demosite\css\search.css, line 12 change
.login { margin-top:5px; cursor:pointer; font-size:10pt; }
to
.login { }
 line 14 remove
.content { background:#f0f0ee; border:1px dotted #999; color:#666699;margin:80px; }
line 15 add
.header-text {color:white;font-size:20px;text-align: center;margin-top:1cm;}
Line 9 change
.login-msg { z-index:1000; position:absolute; right:21px; top:50px; width:147px; text-align:center; padding:5px 0; border:1px dotted red; background:#ffcccc; color:red; }
to
.login-msg { z-index:1000; position:absolute; left:821px; top:130px; width:147px; text-align:center; padding:5px 0; border:1px dotted red; background:#ffcccc; color:red; }
line 16 add
 .footer-text {color:white;font-size:12px;text-align: center;margin-top:1cm;margin-bottom:1cm;}
To make style consistent with UBC website using ubc-clf-full.min.css and ubc-home.css.
C:\Users\jiansen\Desktop\CAS\jiansen_dir\www_cesei0_mobile\ubc_surgery_pub\demosite\index.php, line 53 change
<link rel="stylesheet" type="text/css" href="css/search.css" />
to
<link rel="stylesheet" type="text/css" href="css/search.css" />
<link href="css/ubc-clf-full.min.css" rel="stylesheet">
<link href="css/ubc-home.css" rel="stylesheet">

line 64 change
<h1>UBC Department of Surgery - Publication Search Page</h1>
<div class="admin-login">
<?php if(!isset($_SESSION['username'])){ ?>
    Admin Login: <img src="images/lock.png" alt="Admin Login" class="login">
    <div class="login-box">
        <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        Username:<br/><input type="text" name="name" size="15"/><br/>
        Password:<br/><input type="password" name="pass" size="15"/><br/>
        <input type="submit"  name="submit_login" value="Login"  class="login-submit"/>
        </form>
    </div>
<?php }else{ ?>
       <a href="../scripts/manage/"> Go to Administration</a><br />
       <a href="?action=logout"><img src="fast_edit/images/lock_open.png" alt="Logout admin" title="Logout admin" class="logout" /></a>
<?php } ?>  
</div>
<div class="content">
to
 <div class="container">
<header id="ubc7-header" class="row-fluid expand" role="banner">       
<div class="header-text">
 UBC Department of Surgery - Publication Search Page
</div>
</header>

<!-- UBC Unit Navigation -->
        <div id="ubc7-unit-menu" class="navbar expand" role="navigation">
            <div class="navbar-inner expand">
                    <nav class="nav-collapse collapse" id="ubc7-unit-navigation">
                        <ul class="nav">
    <li class="active"><a href="/ubc_surgery_pub/demosite/"  >Home</a></li>
    <li><a href="http://surgery.med.ubc.ca/"  >Department of Surgery</a></li>
    <li>

<?php if(!isset($_SESSION['username'])){ ?>
    <a class="login">Admin Login:</a>
    <div class="login-box">
        <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        Username:<br/><input type="text" name="name" size="15"/><br/>
        Password:<br/><input type="password" name="pass" size="15"/><br/>
        <input type="submit"  name="submit_login" value="Login"  class="login-submit"/>
        </form>
    </div>
<?php }else{ ?>

       <a href="../scripts/manage/"> Go to Administration</a></li><li>
       <a href="?action=logout">Logout admin</a>
<?php } ?>   

</li>
 
</ul>                    </nav><!-- /.nav-collapse -->
                </div>
        </div><!-- /navbar -->
        <!-- End of UBC Unit Navigation -->   
<div id="content" class="expand row-fluid content" role="main">
line 145 add
<footer class="row-fluid expand" id="ubc7-footer" role="contentinfo">
  <div class="footer-text">
        Copyright © 2014 CESEI, Department of Surgery, UBC. All rights reserved.
  </div>
</footer>
</div>
In mobile, the mobile menu bar is hiiden, the following change will make mobile menu bar appear also auto adjust horizontal to vertical
C:\Users\jiansen\Desktop\CAS\jiansen_dir\www_cesei0_mobile\ubc_surgery_pub\demosite\css\ubc-clf-full.min.css
@media(min-width:980px){.nav-collapse.collapse{height:auto!important;overflow:visible!important}}
to
@media(min-width:0px){.nav-collapse.collapse{height:auto!important;overflow:visible!important}}
 C:\Users\jiansen\Desktop\CAS\jiansen_dir\www_cesei0_mobile\ubc_surgery_pub\demosite\css\ubc-home.css, line 79
change
#content {
    height: 400px;

to
#content {
    height: 100%;
 line 410 change
@media screen and (min-width:1200px) {
    #content {
        height: 470px;
    }
to
@media screen and (min-width:1200px) {
    #content {
        height: 100%;
    }

line 536 change
@media (max-width: 979px) and (min-width: 768px) {
    #content {
        position: relative;
        padding-bottom: 29.78178%;
        height: 144px;
    }
to
@media (max-width: 979px) and (min-width: 768px) {
    #content {
        position: relative;
        padding-bottom: 29.78178%;
        height: 100%;
    } 

C:\Users\jiansen\Desktop\CAS\jiansen_dir\www_cesei0_mobile\ubc_surgery_pub\scripts\query\searchform.inc.php, line 202 change
 $res = mysql_query("SELECT * FROM DEPTS  ORDER BY NAME", $dbcon);
to
 $res = mysql_query("SELECT * FROM DEPTS ", $dbcon);

line 92 change
<th>Department</th>
to
<th>Division</th> 
and more