joshua mods for calendar accessbility

app/assets/stylesheets/lib/group/_group-index.scss

@@ -191,8 +191,8 @@
     }
 }
 
-// 67.5rem
+// 1080px
-@media screen and (min-width: 1080px) {
+@media screen and (min-width: 67.5rem) {
     .group-card {
         width: 25%;
 
@@ -209,7 +209,7 @@
 }
 
 // 1400px
-@media screen and (min-width: 1400px) {
+@media screen and (min-width: 87.5rem) {
     .group-card {
         width: 20%;
 

app/assets/stylesheets/lib/group/_group-members.scss

@@ -60,7 +60,7 @@
 
 .group-member-item {
     list-style: none;
-    padding: 8px 0.75rem;
+    padding: 16px 1rem;
     margin: 8px 0 12px 0;
 }
 
@@ -73,6 +73,7 @@
 .group-member-meta-wrap {
     display: inline-block;
     vertical-align: top;
+    width: 50%;
 }
 
 .group-member-name {
@@ -113,21 +114,26 @@
 }
 
 
-// 480px
+// 620
-@media screen and (min-width: 30rem) {
+@media screen and (min-width: 38.75rem) {
     .group-member-item {
         float: left;
         margin-right: 1rem;
+        width: 45%;
     }
 }
 
-// 760px
+// 980px
 
-@media screen and (min-width: 47.5rem) {
+@media screen and (min-width: 61.25rem) {
     .group-member-content-wrap {
         width: 70%;
     }
 
+    .group-member-item {
+        width: 30%;
+    }
+
     .group-member-page-title {
         display: inline-block;
         margin: 0;
@@ -136,3 +142,11 @@
         transition: .6s all;
     }
 }
+
+// 1400px 
+@media screen and (min-width: 87.5rem) {
+    .group-member-item {
+        width: 20%;
+    }
+
+}

app/templates/orbit_bootstrap/assets/stylesheets/template/modules/calendar.scss

@@ -23,13 +23,6 @@
         text-align: center;
         font-size: 0.8125rem;
     }
-    .loading {
-        &:after {
-            content: '\f1ce';
-            font-family: FontAwesome;
-            animation: 2s linear 0s normal none infinite running fa-spin;
-        }
-    }
 }
 .w-calendar-table {
     margin-bottom: 0;
@@ -40,6 +33,7 @@
     .w-calendar-event {
         background: $theme-color-third;
         color: $theme-white;
+        cursor: pointer;
     }
 
 }
@@ -56,11 +50,3 @@
         right: 10px;
     }
 }
-@keyframes fa-spin {
-0% {
-    transform: rotate(0deg);
-}
-100% {
-    transform: rotate(359deg);
-}
-}

app/templates/orbit_bootstrap/home/header.html.erb

@@ -12,6 +12,7 @@
 <header class="navbar layout-header" role="navigation">
   <div class="container">
     <div class="header-nav" >
+    <a id="accesskey_top" accesskey="Q" href="/<%= "#{locale.to_s}" %>/accesskey" title="Toolbar">:::</a>
       {{header-data}}
     </div>
     <div class="navbar-header">
@@ -24,6 +25,7 @@
       <a class="navbar-brand" href="/"><img class="site-logo" src="{{logo_url}}" alt="Site Logo"> {{site_name}}</a>
     </div>
     <div class="collapse navbar-collapse modules-menu" id="layout-navigation">
+    <a id="accesskey_menu" accesskey="M" href="/<%= "#{locale.to_s}" %>/accesskey" title="Main menu">:::</a>
       <%= render_menu %>
     </div>
   </div>

app/templates/orbit_bootstrap/home/index.html.erb

@@ -8,6 +8,7 @@
   <%= render_header %>
   <section class="layout-slide" data-pp="300"></section>
   <div class="layout-content">
+  <a id="accesskey_content" accesskey="C" href="/<%= "#{locale.to_s}" %>/accesskey" title="Content">:::</a>
     <div class="layout-content-inner container">
       <section class="layout-content-box" data-pp="1"></section>
       <div class="row">

app/templates/orbit_bootstrap/modules/calendar/_calendar_widget1.html.erb

@@ -1,58 +0,0 @@
-<div class="w-calendar widget-calendar-1" data-module="calendar">
-    <div class='month_template'>
-            <h4 class="widget-title ">
-                <span class="text"></span>
-                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
-            </h4>
-        <div class="w-calendar-nav">
-            <a href="#" class="w-calendar-nav-prev">
-                <i class="fa fa-chevron-left"></i>
-                <span class="w-calendar-nav-prev-text hide">Prev</span>
-            </a>
-            <a href="#" class="w-calendar-nav-next">
-                <i class="fa fa-chevron-right"></i>
-                <span class="w-calendar-nav-next-text hide">Next</span>
-            </a>
-        </div>
-        <table class="table table-condensed w-calendar-table">
-            <thead>
-                <tr>
-                    <th>Sun</th>
-                    <th>Mon</th>
-                    <th>Tue</th>
-                    <th>Wed</th>
-                    <th>Thu</th>
-                    <th>Fri</th>
-                    <th>Sat</th>
-                </tr>
-            </thead>
-            <tbody></tbody>
-        </table>
-    </div>  
-</div>
-
-<script>
-    if(document.getElementById("calendar-widget_module") == null){
-        var tag = document.createElement('script');
-        tag.setAttribute("id", "calendar-widget_module");
-        tag.src = "/assets/calendar_widget.js";
-        tag.onload = function(){
-            $("div[data-module=calendar]").each(function(index){
-                var calendar = $(this),
-                    cmi = new CalendarModuleMonth(new Date(), calendar,calendar.data("subpart-id"));
-                cmi.currentMonth();
-                calendar.find("div.w-calendar-nav a").on("click",function(){
-                    var el = $(this);
-                    if(el.hasClass("w-calendar-nav-prev")){
-                        cmi.prevMonth();
-                    }else if(el.hasClass("w-calendar-nav-next")){
-                        cmi.nextMonth();
-                    }
-                    return false;
-                })
-            })
-        }
-        var head = document.getElementsByTagName("head");
-        head[0].appendChild(tag);
-    }
-</script>

app/templates/orbit_bootstrap/modules/calendar/index.html.erb

@@ -1,40 +0,0 @@
-<div id="orbit_calendar">
-  <div id="sec1">
-    <div class="btn-toolbar" id="navigation">
-      <div id="calendar-nav">
-        <div class="btn-group">
-          <button class="btn btn-default btn-sm" id="prev_month_btn">
-            <i class="icon-chevron-left"></i>
-          </button>
-          <button class="btn btn-default btn-sm" id="next_month_btn">
-            <i class="icon-chevron-right"></i>
-          </button>
-          <button class="btn btn-default btn-sm" id="today_btn">Today</button>
-        </div>
-      </div>
-    </div>
-    <div class="form-inline" id="range_selection"></div>
-  </div>
-  <div id='sec3' class="btn-toolbar">
-    <div class="btn-group calendar_mode">
-      <button class="btn btn-default mode_switch btn-sm" data-mode="agendaDay" >day</button>
-      <button class="btn btn-default mode_switch btn-sm" data-mode="agendaWeek" >week</button>
-      <button class="btn btn-default active mode_switch btn-sm" data-mode="month" >month</button>
-      <button class="btn btn-default mode_switch btn-sm" data-mode="agenda" >agenda</button>
-    </div>
-    <button id="refresh_btn" class="btn btn-default btn-sm">
-      <i class="icons-cycle"></i>
-    </button>
-  </div>
-  <div id="view_holder">
-    <h3 id="current_title" class="current_day_title"></h3>
-    <div id="calendar"></div>
-    <div id="calendar_agenda"></div>
-  </div>
-</div>
-<div id="event_quick_view" class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>
-<div id="calendar-loading"></div>
-
-<script type="text/javascript">
-  var calendar = new Calendar("#calendar","{{page_id}}");
-</script>

app/templates/orbit_bootstrap/modules/calendar/info.json

@@ -1,22 +0,0 @@
-{
-    "frontend": [
-        {
-            "filename" : "index",
-            "name" : {
-                "zh_tw" : "1. 行事曆",
-                "en" : "1. Calendar"
-                },
-            "thumbnail" : "thumb.png"
-        }
-    ],
-    "widgets" : [
-        {
-            "filename" : "calendar_widget1",
-            "name" : {
-                "zh_tw" : "1. 行事曆",
-                "en" : "1. Calendar"
-            },
-            "thumbnail" : "thumb.png"
-        }
-    ]
-}

app/templates/orbit_bootstrap/widgets/site_menu_widget/_site_menu_widget1.html.erb

@@ -1,4 +1,5 @@
 <div class="sitemenu-wrap">
+	<a id="accesskey_sitemenu" accesskey="S" href="/<%= "#{locale.to_s}" %>/accesskey" title="Sitemenu">:::</a>
 	<h3 class="sitemenu-title">{{widget_title}}</h3>
 	<ul data-list="pages" class="sitemenu-list level-1" data-level="0">
 		<li class="sitemenu-item level-1">

app/views/admin/groups/members.html.erb

@@ -46,7 +46,7 @@
                 <a href="#"><%= gm["name"][I18n.locale.to_s] %></a><br />
                  <%= gm["user_name"] %><br />
                  <% if gm["admin"] %>
-                    <span class="label label-danger">Admin</span>
+                    <span class="label label-warning">Admin</span>
                  <% end %>
               </div>
             </div>

app/views/orbit_bar/index.html.erb

@@ -167,6 +167,7 @@
           </li>
         <% else %>
           <li>
+          <a id="accesskey_login" class="sr-only" accesskey="L" href="/<%= "#{locale.to_s}" %>/accesskey" title="Login">:::</a>
             <label for="open-orbit-login">
               <i class="icons-login"></i>
             </label>