Willow Theme - New responsive variant of Wilma theme

webapp/src/main/webapp/css/visualization/capabilitymap/graph.css

@@ -41,19 +41,33 @@ body {
 
 /* Contains all the graphics. */
 #container {
-    /*width: 1200px;*/width:940px;
+    /*width: 1200px;*/
+    max-width:940px;
+    width: 100%;
     height: auto;
-    /* margin:0 auto; */
-    /*margin-left:-130px;*/
     position:relative;
-    /*box-shadow:0px 0px 20px -6px #000000;*/
     margin-top:15px;
+    transition: 0.5s ease all;
+    flex-wrap: wrap;
+
+}
+
+@media (min-width: 1200px) {
+    #container.wide-container {    
+        width: 1200px;
+        max-width: 1200px;
+        margin-left:-130px;
+        margin-right:-130px;
+    }
+
+    #container > #center-container {
+        width: 66%;
+    }
 }
 
 #left-container,
 #right-container,
 #center-container {
-    height:600px;
     position:absolute;
     top:0;
 }
@@ -352,4 +366,4 @@ footer {
 footer p.copyright {
     margin-left:0px;
     padding-left:0px;
-}
+}

webapp/src/main/webapp/js/visualization/capabilitymap/graph_new.js

@@ -1025,11 +1025,11 @@ var unhide = function() {
     $("#resetButton").removeAttr("disabled");
     if ($(window).width() > 1230) {
         $("#container").css("box-shadow", "0px 0px 20px -6px #000000");
-        $("#container").animate({"height" : "600px", "width" : "1200px", "margin-bottom" : "20px", "margin-left" : (($("#main-content").width() - 1200) / 2) + "px"}, 500);
-        $("#center-container").css("width", "900px");
+        $("#container").animate({"height" : "600px", "width" : "auto", "margin-bottom" : "20px"}, 500);
+        $("#container").addClass("wide-container");
     } else {
-        $("#container").animate({"height" : "600px"});
-        $("#center-container").css("width", "640px");
+        $("#container").animate({"height" : "auto"});
+        // $("#center-container").css("width", "640px");
     }
     $("#helptext").fadeOut();
     $("#center-container").fadeIn();

webapp/src/main/webapp/templates/freemarker/visualization/publication/personPublicationCountDynamicActivator.ftl

@@ -11,8 +11,8 @@
 -->
 <#if shouldVIVOrenderVis>
     <#-- Added requestingTemplate variable in release 1.6 to support multi-view option -->
-    <#if requestingTemplate = "foaf-person-wilma" >
-	    <#include "personPublicationSparklineContent.ftl">
+    <#if requestingTemplate == "foaf-person-wilma" || requestingTemplate == "foaf-person-willow">
+        <#include "personPublicationSparklineContent.ftl">
 	<#else>
         <#include "personPublicationCountNoSparkline.ftl">
     </#if>

webapp/src/main/webapp/themes/willow/css/grid.css

@@ -0,0 +1,164 @@
+.container,
+.container-fluid,
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
+  width: 100%;
+  padding-right: var(--bs-gutter-x, 0.75rem);
+  padding-left: var(--bs-gutter-x, 0.75rem);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.row {
+    --bs-gutter-x: 1.5rem;
+    --bs-gutter-y: 0;
+    display: flex;
+    flex-wrap: wrap;
+    /* margin-top: calc(-1 * var(--bs-gutter-y));
+    margin-right: calc(-0.5 * var(--bs-gutter-x));
+    margin-left: calc(-0.5 * var(--bs-gutter-x)); */
+  }
+  .row > * {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%;
+    /* padding-right: calc(var(--bs-gutter-x) * 0.5);
+    padding-left: calc(var(--bs-gutter-x) * 0.5); */
+    /* margin-top: var(--bs-gutter-y); */
+  }
+
+.col-1 {
+    flex: 0 0 auto;
+    width: 8.33333333%;
+}
+
+.col-2 {
+    flex: 0 0 auto;
+    width: 16.66666667%;
+}
+
+.col-3 {
+    flex: 0 0 auto;
+    width: 25%;
+}
+
+.col-4 {
+    flex: 0 0 auto;
+    width: 33.33333333%;
+}
+
+.col-5 {
+    flex: 0 0 auto;
+    width: 41.66666667%;
+}
+
+.col-6 {
+    flex: 0 0 auto;
+    width: 50%;
+}
+
+.col-7 {
+    flex: 0 0 auto;
+    width: 58.33333333%;
+}
+
+.col-8 {
+    flex: 0 0 auto;
+    width: 66.66666667%;
+}
+
+.col-9 {
+    flex: 0 0 auto;
+    width: 75%;
+}
+
+.col-10 {
+    flex: 0 0 auto;
+    width: 83.33333333%;
+}
+
+.col-11 {
+    flex: 0 0 auto;
+    width: 91.66666667%;
+}
+
+.col-12 {
+    flex: 0 0 auto;
+    width: 100%;
+}
+
+
+@media (min-width: 768px) {
+    .col-md {
+      flex: 1 0 0%;
+    }
+
+    .col-md-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+
+    .col-md-1 {
+      flex: 0 0 auto;
+      width: 8.33333333%;
+    }
+
+    .col-md-2 {
+      flex: 0 0 auto;
+      width: 16.66666667%;
+    }
+
+    .col-md-3 {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+
+    .col-md-4 {
+      flex: 0 0 auto;
+      width: 33.33333333%;
+    }
+
+    .col-md-5 {
+      flex: 0 0 auto;
+      width: 41.66666667%;
+    }
+
+    .col-md-6 {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+
+    .col-md-7 {
+      flex: 0 0 auto;
+      width: 58.33333333%;
+    }
+
+    .col-md-8 {
+      flex: 0 0 auto;
+      width: 66.66666667%;
+    }
+
+    .col-md-9 {
+      flex: 0 0 auto;
+      width: 75%;
+    }
+
+    .col-md-10 {
+      flex: 0 0 auto;
+      width: 83.33333333%;
+    }
+
+    .col-md-11 {
+      flex: 0 0 auto;
+      width: 91.66666667%;
+    }
+
+    .col-md-12 {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+}

webapp/src/main/webapp/themes/willow/css/openSocial/gadgets.css

@@ -0,0 +1,118 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.gadgets-gadget-chrome {
+  float: left;
+  margin: 4px 6px 4px 12px; /* changed the left value from 0 tlw72*/
+  border: 1px solid #CCC;
+  border: 1px solid #dfebe5; /*#7aa5d6;*/
+}
+.col2 .gadgets-gadget-chrome {
+  margin-left: 9px;
+}
+
+.gadgets-gadget
+{
+  width: 100%;
+  border: none;
+  background-color:#fff; /*tlw72*/
+}
+
+.gadgets-gadget-title-bar {
+  padding: 4px 4px 2px;
+  background-color: #EEEBE5;
+  background-color: #f1f2ee; /* #e5ecf9; */
+}
+/*.gadgets-gadget-title-bar:hover { background-color: #e7e3db; } */
+.gadgets-gadget-title-bar img,
+.gadgets-gadget-title-button {
+  vertical-align: top;
+}
+
+/* title bar */
+.gadgets-gadget-title a, .gadgets-gadget-title a:hover, .gadgets-gadget-title a:visited  {
+ /* font-weight: bold; */
+  font-size: 16px; /*14px*/
+  color: #2485AE; /*#CA7C29*/
+  padding-left:8px; /*tlw72*/
+  text-decoration: none; /*tlw72*/
+}
+.EditBody .gadgets-gadget-title a {
+  color:#3B6394;
+}
+.EditBody .gadgets-gadget-title a:hover {
+  color:#1E416C;
+}
+
+.gadgets-gadget-title-button-bar {
+  font-size: smaller;
+}
+
+.gadgets-gadget-canvas-title {
+  color: #000;
+  padding-left: 6px;
+}
+
+.gadgets-gadget-user-prefs-dialog {
+  background-color: #e5ecf9;
+}
+
+.gadgets-gadget-user-prefs-dialog-action-bar {
+  text-align: center;
+  padding-bottom: 4px;
+}
+
+.gadgets-gadget-title-button img {
+  border: 2px solid #4F5CC7;
+  border: none;
+  float: left; /*right*/
+  margin-left: 2px; /*margin-right*/
+  margin-top:6px; /*tlw72*/
+}
+.EditBody .gadgets-gadget-title-button img {
+  float: left;
+  margin-right: 8px;
+}
+
+.gadgets-gadget-content {
+  padding: 4px;
+}
+
+.gadgets-log-entry {
+}
+
+/* Used to style messages produced during rewriting by CajaContentRewriter */
+.gadgets-messages {
+
+}
+
+.gadgets-gadget-status {
+  font-weight: bold;
+  float: right;
+/*  text-align: center; */
+  font-size: 12px;
+  padding-right: 6px;
+}
+* html .gadgets-gadget-status { margin-top: -18px; padding-right: 30px; } /* fudge line break for IE6 */
+*+html .gadgets-gadget-status { margin-top: -18px; padding-right: 30px; } /* fudge line break for IE7 */
+
+/* list tool fix ticket #135 */
+* html #ctl00_ctl00_left_pnlOpenSocialTools { height: 130px; }
+*+html #ctl00_ctl00_left_pnlOpenSocialTools { height: 130px; }
+* html #ctl00_ctl00_left_pnlOpenSocialTools { margin-left: -8px; }