Skip to content

Antti Väyrynen / Moya

Go to a project
Commit 74ae472d by Ossi Pesonen
Options

Updated the moyav2 CSS styles with tables. Added a media CSS for responsive desi… 

…gn. Created meta tags for responsive design. Modified multiple XML files adding table styling.
1 parent f5ebb8fd
Expand all
Inline Side-by-side
Showing with 162 additions and 25 deletions
code/moya-web/WebContent/bill/billSummary.xhtml
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<f:event type="preRenderView" listener="#{billListView.initSummaryView}" /> <f:event type="preRenderView" listener="#{billListView.initSummaryView}" />
</f:metadata> </f:metadata>
<ui:define name="content"> <ui:define name="content">
<h:dataTable border="0" id="billSummary" value="#{billListView.billsummary}" var="sumline"> <h:dataTable border="0" id="billSummary" value="#{billListView.billsummary}" var="sumline" styleClass="moya_datatable2">
<h:column> <h:column>
<f:facet name="header"> <f:facet name="header">
<h:outputText value="${i18n['product.name']}" /> <h:outputText value="${i18n['product.name']}" />
......
code/moya-web/WebContent/bill/list.xhtml
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
</f:metadata> </f:metadata>
<ui:define name="content"> <ui:define name="content">
<bills:list /> <bills:list />
<br /><br />
<p:outputPanel rendered="#{placeGroupView.useEticket}" > <p:outputPanel rendered="#{placeGroupView.useEticket}" >
<p> <p>
<p:button outcome="/place/myEtickets" value="#{i18n['placegroup.showEticket']}" /> <p:button outcome="/place/myEtickets" value="#{i18n['placegroup.showEticket']}" />
......
code/moya-web/WebContent/foodwave/list.xhtml
...@@ -21,7 +21,9 @@ ...@@ -21,7 +21,9 @@
<h1>#{i18n['user.foodwavelist.title']}</h1> <h1>#{i18n['user.foodwavelist.title']}</h1>
</ui:define> </ui:define>
<ui:define name="content"> <ui:define name="content">
<h:form id="foodwave" styleClass="moya_datatable3">
<foodwave:list outcome="/foodwave/listProducts" /> <foodwave:list outcome="/foodwave/listProducts" />
</h:form>
</ui:define> </ui:define>
</ui:composition> </ui:composition>
......
code/moya-web/WebContent/foodwave/listProducts.xhtml
...@@ -22,9 +22,8 @@ ...@@ -22,9 +22,8 @@
</ui:define> </ui:define>
<ui:define name="content"> <ui:define name="content">
<!-- products:shop commitaction="#{foodWaveFoodView.commitShoppingCart()}" items="#{foodWaveFoodView.shoppingcart}" commitValue="#{i18n['productshop.commit']}" /--> <!-- products:shop commitaction="#{foodWaveFoodView.commitShoppingCart()}" items="#{foodWaveFoodView.shoppingcart}" commitValue="#{i18n['productshop.commit']}" /-->
<foodwave:listFoods selectaction="#{foodWaveFoodView.buyFromInternet()}" items="#{foodWaveFoodView.shoppingcart}" commitValue="foodshop.buyProceedToPay"/> <foodwave:listFoods selectaction="#{foodWaveFoodView.buyFromInternet()}" items="#{foodWaveFoodView.shoppingcart}" commitValue="foodshop.buyProceedToPay"/>
</ui:define> </ui:define>
......
code/moya-web/WebContent/info/cardlessIncoming.xhtml
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
xmlns:tools="http://java.sun.com/jsf/composite/cditools" xmlns:user="http://java.sun.com/jsf/composite/cditools/user" xmlns:infoview="http://java.sun.com/jsf/composite/cditools/infoview"> xmlns:tools="http://java.sun.com/jsf/composite/cditools" xmlns:user="http://java.sun.com/jsf/composite/cditools/user" xmlns:infoview="http://java.sun.com/jsf/composite/cditools/infoview">
<h:body> <h:body>
<ui:composition template="/resources/templates/#{sessionHandler.infoscreen}/template.xhtml"> <ui:composition template="/resources/templates/#{sessionHandler.infoscreen}/template.xhtml">
<ui:param name="ignorenavigationleft" value="true" />
<f:metadata> <f:metadata>
<f:viewParam name="userid" value="#{userView.userid}" /> <f:viewParam name="userid" value="#{userView.userid}" />
......
code/moya-web/WebContent/place/myGroups.xhtml
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<ui:define name="content"> <ui:define name="content">
<h:outputText rendered="#{empty placeGroupView.groupMemberships}" value="#{i18n['placegroupview.noMemberships']}" /> <h:outputText rendered="#{empty placeGroupView.groupMemberships}" value="#{i18n['placegroupview.noMemberships']}" />
<h:form rendered="#{!empty placeGroupView.groupMemberships}" id="placelistform"> <h:form rendered="#{!empty placeGroupView.groupMemberships}" id="placelistform" styleClass="moya_datatable2">
<p:dataTable value="#{placeGroupView.groupMemberships}" var="member" id="placestable"> <p:dataTable value="#{placeGroupView.groupMemberships}" var="member" id="placestable">
......
code/moya-web/WebContent/poll/index.xhtml
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<ui:define name="content"> <ui:define name="content">
<h1>Kyselyt</h1> <h1>Kyselyt</h1>
<h:form> <h:form>
<h:dataTable border="0" id="poll" value="#{pollView.polls}" var="poll"> <h:dataTable border="0" id="poll" value="#{pollView.polls}" styleClass="moya_datatable1" var="poll">
<h:column> <h:column>
<h:outputText value="#{poll.name}" /> <h:outputText value="#{poll.name}" />
</h:column> </h:column>
......
code/moya-web/WebContent/resources/cditools/bills/list.xhtml
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</h:form> </h:form>
<h:form rendered="#{billListView.bills.rowCount gt 0}"> <h:form rendered="#{billListView.bills.rowCount gt 0}" id="billList" styleClass="moya_datatable3">
<p:dataTable styleClass="bordertable" id="billList" <p:dataTable styleClass="bordertable" id="billList"
value="#{billListView.bills}" var="bill" value="#{billListView.bills}" var="bill"
......
code/moya-web/WebContent/resources/cditools/products/shop.xhtml
...@@ -111,16 +111,13 @@ ...@@ -111,16 +111,13 @@
</p:columnGroup> </p:columnGroup>
</p:dataTable> </p:dataTable>
<br />
<h:panelGrid columns="3" rendered="#{productShopView.checkAllowStats}"> <h:panelGrid columns="3" rendered="#{productShopView.checkAllowStats}">
<h:outputText for="allowStats" value="#{i18n['bill.allowStatistics']}" /> <p><h:outputText for="allowStats" value="#{i18n['bill.allowStatistics']}" /></p>
<h:selectBooleanCheckbox id="allowStats" <h:selectBooleanCheckbox id="allowStats"
value="#{productShopView.allowStatistics}" /> value="#{productShopView.allowStatistics}" />
<h:message for="allowStats" /> <p><h:message for="allowStats" /></p>
</h:panelGrid> </h:panelGrid>
<br />
<h:panelGroup rendered="#{productShopView.gatherBillInfo}"> <h:panelGroup rendered="#{productShopView.gatherBillInfo}">
<h2> <h2>
<p:outputLabel value="#{i18n['bill.notes.title']}" /> <p:outputLabel value="#{i18n['bill.notes.title']}" />
...@@ -128,7 +125,6 @@ ...@@ -128,7 +125,6 @@
<p:inputTextarea cols="50" value="#{productShopView.otherInfo}" <p:inputTextarea cols="50" value="#{productShopView.otherInfo}"
label="#{i18n['otherInfo']}" /> label="#{i18n['otherInfo']}" />
</h:panelGroup> </h:panelGroup>
<br />
<!-- Paytrail needs to initialize after the ajax call is complete --> <!-- Paytrail needs to initialize after the ajax call is complete -->
<!-- This function is to be override by the paytrail init function --> <!-- This function is to be override by the paytrail init function -->
......
code/moya-web/WebContent/resources/cditools/user/edit.xhtml
...@@ -172,7 +172,7 @@ ...@@ -172,7 +172,7 @@
</ui:fragment> </ui:fragment>
<h:form> <h:form id="userSelectableRoles">
<p:fieldset legend="#{i18n['user.userSelectableRoles']}" rendered="#{userView.showUserSelectableRoles and cc.attrs.showRoles}"> <p:fieldset legend="#{i18n['user.userSelectableRoles']}" rendered="#{userView.showUserSelectableRoles and cc.attrs.showRoles}">
<p:panelGrid columns="2" styleClass="noBorders"> <p:panelGrid columns="2" styleClass="noBorders">
<p:selectManyCheckbox converter="#{roleConverter}" layout="pageDirection" value="#{userView.userSelectableRoles}"> <p:selectManyCheckbox converter="#{roleConverter}" layout="pageDirection" value="#{userView.userSelectableRoles}">
......
code/moya-web/WebContent/resources/templates/moyav2/css/media.css 0 → 100644
@media screen and (max-width: 1600px) {
#header_first h1 { font-size: 24px; }
}
@media screen and (max-width: 1250px) {
#content-wrapper { overflow: visible; }
header#top #user-mode .ui-button-text {
padding: 10px !important;
background: #70cbc3 !important }
header#top #user-mode .ui-button-text:hover { background: #263238 !important; }
}
@media screen and (max-width: 1000px) {
nav#menu h3 a { font-size: 12px !important; }
body, p, label { font-size: 12px !important; }
img { max-width: 100%; height: auto; }
}
@media screen and (max-width: 900px) {
.ui-panelgrid .ui-panelgrid-cell { padding: 0; }
#main .ui-fieldset { padding: 0 !important ;}
header#top { height: auto !important; }
header#top #header_first { width: 50%; height: 100px; }
header#top #header_second { width: 45%; background: #70cbc3; height: 100px; margin-left: 0; padding-left: 5%;}
header#top #header_third { width: 47%; height: auto; margin-left: 0 !important; padding-left: 3%;}
header#top #header_fourth { width: 45%; margin-left: 0 !important; float: right; }
#content-wrapper #left-bar { width: 30% !important; }
#content-wrapper #main { width: 65%; }
#content-wrapper #main.span_10_of_10 { width: 100% !important; }
}
@media screen and (max-width: 760px) {
#main table table thead td { padding: 10px; text-align: left;}
#main table table tr { padding: 10px 0;}
#main table thead th { padding: 10px;}
#main table tr, #main table td, #main table th{ display: block; width: 100%;}
table tr:nth-child(odd) { background: #eee; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }
#header_first a { padding: 15px 0; }
#header_second #event-info { padding: 15px 0; }
.grid, #content-wrapper.grid {display: block !important;}
.col { width: 100% !important; float: none !important; display: block;}
#user-login { position: inherit !important;}
#toggle-navigation { display: block !important; }
#content-wrapper #left-bar { display: none; }
#content-wrapper .col { display: block; }
#content-wrapper #left-bar #moya-logo { display: none; }
#main table thead th { font-size: 10px; word-break: break-all}
.content-padding { padding: 10px; }
#user-login .col.currentnick { width:70% !important; float: left !important; line-height: 50px; }
#user-login #log-out { width: 30% !important; float: left !important; line-height: 35px; min-height: auto; }
#user-login #log-out a { min-height: 50px; }
#logged-in { height: auto;}
#content-wrapper #left-bar { width: 100% !important; height: auto; }
header#top .col { text-align: center; height: auto !important; margin-left: 0 !important; padding-left: 0 !important; }
}
\ No newline at end of file
code/moya-web/WebContent/resources/templates/moyav2/css/print.css 0 → 100644
@media print {
}
\ No newline at end of file
code/moya-web/WebContent/resources/templates/moyav2/css/skinning.css 0 → 100644
/* This is file for styling (colors and font-sizes) */
.ui-widget {
font-size: 95% !important;
}
.bgColor1.ui-layout-unit {
}
.bgColor1 .ui-layout-unit-content {
background-image: none;
}
.bgColor1 .ui-layout-unit-header {
background-image: none;
}
.missing_i18n {
color: red;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
code/moya-web/WebContent/resources/templates/moyav2/css/tabnav.css 0 → 100644
/*
TABNAV
*/
#edit { float: left; width:100%; border-bottom: 1px solid black; }
ul#usertabnav li {
display:inline;
list-style:none;
}
ul#usertabnav li a {
display:inline-block;
text-decoration:none;
padding: 15px 20px;
background: #70cbc3;
color: #FFF;
}
ul#usertabnava:hover {text-decoration:none; color:rgb(50,50,50);}
ul#usertabnav li.active {font-weight: bold; background-color:rgba(250,250,250,0.4); color: rgba(0,0,0,1); border-radius: 12px 12px 0 0; border: 1px solid black; border-bottom: none }
\ No newline at end of file
code/moya-web/WebContent/resources/templates/moyav2/js/main.js
...@@ -10,5 +10,8 @@ $(document).ready(function() { ...@@ -10,5 +10,8 @@ $(document).ready(function() {
$('#not-logged').slideToggle(300); $('#not-logged').slideToggle(300);
$(this).toggleClass('active'); $(this).toggleClass('active');
}); });
$('#toggle-navigation').click(function() {
$('#left-bar').slideToggle(300);
});
}); });
\ No newline at end of file
code/moya-web/WebContent/shop/createBill.xhtml
...@@ -15,9 +15,8 @@ ...@@ -15,9 +15,8 @@
<h1>#{i18n['page.product.createBill.header']}</h1> <h1>#{i18n['page.product.createBill.header']}</h1>
</ui:define> </ui:define>
<ui:define name="content"> <ui:define name="content">
<h:form id="billshopform"> <h:form id="billshopform" styleClass="moya_datatable2">
<products:shop commitaction="#{productShopView.commitBillCart()}" items="#{productShopView.shoppingcart}" commitValue="#{i18n['productshop.commit']}" /> <products:shop commitaction="#{productShopView.commitBillCart()}" items="#{productShopView.shoppingcart}" commitValue="#{i18n['productshop.commit']}" />
</h:form> </h:form>
</ui:define> </ui:define>
</ui:composition> </ui:composition>
......
code/moya-web/WebContent/user/accountEvents.xhtml
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</ui:define> </ui:define>
<ui:define name="content"> <ui:define name="content">
<p:dataTable border="1" id="ac" value="#{userView.user.accountEvents}" var="ac"> <p:dataTable border="1" id="ac" styleClass="moya_datatable2" value="#{userView.user.accountEvents}" var="ac">
<p:column> <p:column>
<f:facet name="header"> <f:facet name="header">
<h:outputText value="#{i18n['accountEvent.productname']}" /> <h:outputText value="#{i18n['accountEvent.productname']}" />
......
code/moya-web/WebContent/user/invite.xhtml
...@@ -12,13 +12,10 @@ ...@@ -12,13 +12,10 @@
<h1>#{i18n['user.page.invite']}</h1> <h1>#{i18n['user.page.invite']}</h1>
</ui:define> </ui:define>
<ui:define name="content"> <ui:define name="content">
<h:form> <h:form>
<h:panelGrid columns="3"> <p><h:outputLabel for="invite" value="#{i18n['user.invitemail']}" /></p>
<h:outputLabel for="invite" value="#{i18n['user.invitemail']}" />
<h:inputText id="invite" value="#{inviteView.invitemail}" size="40" required="true" /> <h:inputText id="invite" value="#{inviteView.invitemail}" size="40" required="true" />
<h:message for="invite" /> <p><h:message for="invite" /></p>
</h:panelGrid>
<h:commandButton action="#{inviteView.invite()}" value="#{i18n['user.invite']}" /> <h:commandButton action="#{inviteView.invite()}" value="#{i18n['user.invite']}" />
</h:form> </h:form>
......
code/moya-web/WebContent/voting/compolist.xhtml
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<h1>#{i18n['voting.allcompos.header']}</h1> <h1>#{i18n['voting.allcompos.header']}</h1>
<p>#{i18n['voting.allcompos.description']}</p> <p>#{i18n['voting.allcompos.description']}</p>
<h:form> <h:form id="compolist" styleClass="moya_datatable2">
<h:dataTable styleClass="bordertable" rowClasses="roweven,rowodd" id="compolisttable" value="#{compoView.compos}" var="compo"> <h:dataTable styleClass="bordertable" rowClasses="roweven,rowodd" id="compolisttable" value="#{compoView.compos}" var="compo">
<h:column> <h:column>
<f:facet name="header"> <f:facet name="header">
......
code/moya-web/WebContent/voting/myEntries.xhtml
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<h1>My entries</h1> <h1>My entries</h1>
<h:form> <h:form id="myEntries" styleClass="moya_datatable2">
<h:dataTable styleClass="bordertable" rowClasses="roweven,rowodd" id="compolisttable" value="#{voteListView.entries}" var="entry"> <h:dataTable styleClass="bordertable" rowClasses="roweven,rowodd" id="compolisttable" value="#{voteListView.entries}" var="entry">
<h:column> <h:column>
<f:facet name="header"> <f:facet name="header">
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!