Merge pull request #357 from silk-framework/fix/css

Improved formatting
silk-framework · Mar 24, 2020 · a65f64c · a65f64c
2 parents 81862dd + 0d4f4ea
commit a65f64c
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 117 deletions.
diff --git a/silk-workbench/silk-workbench-core/app/views/start.scala.html b/silk-workbench/silk-workbench-core/app/views/start.scala.html
@@ -16,27 +16,31 @@
 }
 
 @content = {
-  <div id="welcome">
-    <img class="logo" src="@Branding.logo.url"/>
-    @welcome
+  <div class="mdl-card mdl-shadow--2dp mdl-card--stretch">
+    <div class="mdl-card__content">
+      <div id="welcome">
+        <img class="logo" src="@Branding.logo.url"/>
+        @welcome
+      </div>
+
+      <p>
+        Your current workspace contains @projects.size project(s).
+      </p>
+
+      <button id="open-workspace-btn" class="mdl-button mdl-js-button mdl-button--raised" onclick="window.location = '@config.baseUrl/workspace'">Open Workspace</button>
+      @if(!projects.exists(_.name == exampleName)) {
+        <button id="start-load-example" class="mdl-button mdl-js-button mdl-button--raised" onclick="loadExample()" style="margin-left: 5px;">Load Example</button>
+      }
+
+      <script type="text/javascript">
+        function loadExample() {
+          $.post('@config.baseUrl/workspace/@exampleName/importExample')
+          .success(function(request) { window.location = '@config.baseUrl/workspace' })
+          .fail(function(request) { alert(request.responseText); })
+        }
+      </script>
+    </div>
   </div>
-
-  <p>
-    Your current workspace contains @projects.size project(s).
-  </p>
-
-  <button id="open-workspace-btn" class="mdl-button mdl-js-button mdl-button--raised" onclick="window.location = '@config.baseUrl/workspace'">Open Workspace</button>
-  @if(!projects.exists(_.name == exampleName)) {
-    <button id="start-load-example" class="mdl-button mdl-js-button mdl-button--raised" onclick="loadExample()" style="margin-left: 5px;">Load Example</button>
-  }
-
-  <script type="text/javascript">
-    function loadExample() {
-      $.post('@config.baseUrl/workspace/@exampleName/importExample')
-      .success(function(request) { window.location = '@config.baseUrl/workspace' })
-      .fail(function(request) { alert(request.responseText); })
-    }
-  </script>
 }
 
 @main(None, "start")(header)(toolbar)(content)
diff --git a/silk-workbench/silk-workbench-core/public/main.css b/silk-workbench/silk-workbench-core/public/main.css
@@ -147,13 +147,16 @@ div.actions .ui-button-text {
   margin-left: 3px;
 }
 
-#content {
+main {
   background: #f7f7f7;
+}
+
+#content {
   float: left;
   min-width: 300px;
   width: calc(100% - 20px);
-  height: 100%;
-  padding: 10px 10px;
+  margin: 10px 10px;
+  padding: 0;
 }
 
 #help {

diff --git a/silk-workbench/silk-workbench-rules/app/views/learning/activeLearn.scala.html b/silk-workbench/silk-workbench-rules/app/views/learning/activeLearn.scala.html
@@ -75,9 +75,20 @@
 }
 
 @content = {
-  <div class="mdl-shadow--2dp">
-    <div class="wrapper-header">
-      <div class="wrapper-title">Linkage Rule Candidate</div>
+  <div class="mdl-grid mdl-grid--centered">
+    <div class="mdl-cell mdl-cell--12-col">
+      @learnedRuleCard
+    </div>
+    <div class="mdl-cell mdl-cell--12-col">
+      @uncertainLinksCard
+    </div>
+  </div>
+}
+
+@learnedRuleCard = {
+  <div class="mdl-card mdl-shadow--2dp mdl-card--stretch">
+    <div class="mdl-card__title mdl-card--border">
+      <div class="mdl-card__title-text">Linkage Rule</div>
       <button id="show_graph_button" class="mdl-button mdl-js-button mdl-button--icon toggle_graph_button" style="display: none;">
         <i class="material-icons">expand_more</i>
       </button>
@@ -90,16 +101,16 @@
       <div class="mdl-tooltip mdl-tooltip--left" for="hide_graph_button">
         Hide the current Linking Rule Candidate
       </div>
-      <div id="learning_fitness_info">--</div>
+      <div id="learning_fitness_info" class="mdl-card__supporting-text">--</div>
     </div>
 
-    <div class="wrapper">
+    <div class="mdl-card__content">
       <div id="rule_view" class="clearfix">
-        @autoReload(
-          context = context,
-          contentPath = Learning.rule(context.project.name, context.task.id).url,
-          activityId = ActiveLearningFactory.pluginId
-        )
+      @autoReload(
+        context = context,
+        contentPath = Learning.rule(context.project.name, context.task.id).url,
+        activityId = ActiveLearningFactory.pluginId
+      )
       </div>
     </div>
     <script type="text/javascript">
@@ -113,13 +124,15 @@
       });
     </script>
   </div>
+}
 
-  <div class="mdl-shadow--2dp">
-    <div class="wrapper-header">
-      <div class="wrapper-title">Uncertain links</div>
+@uncertainLinksCard = {
+  <div class="mdl-card mdl-shadow--2dp mdl-card--stretch">
+    <div class="mdl-card__title mdl-card--border">
+      <div class="mdl-card__title-text">Uncertain links</div>
     </div>
 
-    <div class="wrapper" style="overflow: auto;">
+    <div class="mdl-card__content" style="overflow: auto;">
       <div id="tree-header">
         <div class="middle">
           <ul class="navigation"></ul>

diff --git a/silk-workbench/silk-workbench-rules/public/stylesheets/editor/editor.css b/silk-workbench/silk-workbench-rules/public/stylesheets/editor/editor.css
@@ -53,7 +53,7 @@ body{
   width: auto;
   height: 800px;
   padding: 5px;
-  overflow: scroll;
+  overflow: auto;
   position: relative;
   background: url("../../img/editor/grid.png") repeat scroll 0 0;
   border:1px solid #d9d9d9;

diff --git a/silk-workbench/silk-workbench-rules/public/stylesheets/table.css b/silk-workbench/silk-workbench-rules/public/stylesheets/table.css
@@ -1,8 +1,3 @@
-body {
-  color: #656565;
-  background: #f7f7f7;
-}
-
 p {
   margin-top: 4px;
 }

diff --git a/silk-workbench/silk-workbench-workspace/app/controllers/workspace/DatasetApi.scala b/silk-workbench/silk-workbench-workspace/app/controllers/workspace/DatasetApi.scala
@@ -105,7 +105,14 @@ class DatasetApi @Inject() () extends InjectedController with ControllerUtilsTra
 
   def dataset(project: String, task: String): Action[AnyContent] = RequestUserContextAction { implicit request => implicit userContext =>
     val context = Context.get[GenericDatasetSpec](project, task, request.path)
-    Ok(views.html.workspace.dataset.dataset(context))
+    context.task.data match {
+      case dataset: GenericDatasetSpec =>
+        if (dataset.plugin.isInstanceOf[RdfDataset]) {
+          Redirect(routes.DatasetApi.sparql(project, task))
+        } else {
+          Redirect(routes.DatasetApi.table(project, task))
+        }
+    }
   }
 
   def table(project: String, task: String, maxEntities: Int): Action[AnyContent] = RequestUserContextAction { implicit request => implicit userContext =>

diff --git a/...orkbench-workspace/app/org/silkframework/workbench/workspace/WorkbenchPluginDataset.scala b/...orkbench-workspace/app/org/silkframework/workbench/workspace/WorkbenchPluginDataset.scala
@@ -66,14 +66,11 @@ object WorkbenchPluginDataset {
     override def tabs: Seq[Tab] = {
       task.data match {
         case dataset: GenericDatasetSpec =>
-          var tabs = Seq(Tab("Dataset", s"workspace/datasets/$project/$taskId/dataset"))
           if (dataset.plugin.isInstanceOf[RdfDataset]) {
-            tabs = tabs :+ Tab("Sparql", s"workspace/datasets/$project/$taskId/sparql")
+            Seq(Tab("SPARQL", s"workspace/datasets/$project/$taskId/sparql"))
           } else {
-            tabs = tabs :+ Tab("Tableview", s"workspace/datasets/$project/$taskId/table")
+            Seq(Tab("Tableview", s"workspace/datasets/$project/$taskId/table"))
           }
-          tabs
-        case _ => Seq.empty
       }
     }
   }

diff --git a/silk-workbench/silk-workbench-workspace/app/views/workspace/activities.scala.html b/silk-workbench/silk-workbench-workspace/app/views/workspace/activities.scala.html
@@ -105,7 +105,11 @@
 }
 
 @content = {
-  @workspaceActivities(WorkspaceFactory().workspace)
+  <div class="mdl-card mdl-shadow--2dp mdl-card--stretch">
+    <div class="mdl-card__content">
+      @workspaceActivities(WorkspaceFactory().workspace)
+    </div>
+  </div>
 
   <div id="statusCometIFrame"></div>
 }

diff --git a/silk-workbench/silk-workbench-workspace/app/views/workspace/dataset/dataset.scala.html b/silk-workbench/silk-workbench-workspace/app/views/workspace/dataset/dataset.scala.html
diff --git a/silk-workbench/silk-workbench-workspace/app/views/workspace/dataset/sparql.scala.html b/silk-workbench/silk-workbench-workspace/app/views/workspace/dataset/sparql.scala.html
@@ -14,35 +14,57 @@
 }
 
 @content = {
-<form action="sparql">
-  <textarea name="query" cols="70" rows="25">
-@if(query.isEmpty) {@for((prefix, namespace) <- context.project.config.prefixes.prefixMap) {PREFIX @prefix: &lt;@namespace&gt;
+  <div class="mdl-grid mdl-grid--centered">
+    <div class="mdl-cell mdl-cell--12-col">
+      @queryCard
+    </div>
+    <div class="mdl-cell mdl-cell--12-col">
+      @resultTable
+    </div>
+  </div>
 }
-SELECT * WHERE {
-  ?s ?p ?o
+
+@queryCard = {
+  <div class="mdl-card mdl-shadow--2dp mdl-card--stretch">
+    <div class="mdl-card__content">
+      <form action="sparql">
+        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+          <textarea id="query" name="query" class="mdl-textfield__input" cols="70" rows="18">@if(query.isEmpty) {@defaultQuery} else {@query}</textarea>
+        </div>
+        <input class="mdl-button mdl-js-button mdl-button--raised"  type="submit" value="Submit">
+      </form>
+    </div>
+  </div>
 }
-LIMIT 20} else {@query}
-  </textarea>
-  <br/>
-  <input type="submit" value="Submit">
-</form>
-
-<table>
-  <tr>
-    @for(results <- queryResults.toList;
-         variable <- results.variables) {
-      <th>@variable<th>
-    }
-  </tr>
 
-  @for(results <- queryResults.toList; bindings <- results.bindings) {
-    <tr>
+@resultTable = {
+  <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
+    <thead>
+      <tr>
+      @for(results <- queryResults.toList;
+              variable <- results.variables) {
+        <th class="mdl-data-table__cell--non-numeric">@variable<th>
+        }
+      </tr>
+    </thead>
+    <tbody>
+    @for(results <- queryResults.toList; bindings <- results.bindings) {
+      <tr>
       @for((variable, node) <- bindings) {
-        <td>@node.value<td>
-      }
-    </tr>
-  }
-</table>
+        <td class="mdl-data-table__cell--non-numeric" style="white-space: normal">@node.value<td>
+        }
+      </tr>
+    }
+    </tbody>
+  </table>
+}
+
+@defaultQuery = {@for((prefix, namespace) <- context.project.config.prefixes.prefixMap) {PREFIX @prefix: &lt;@namespace&gt;
+}
+SELECT * WHERE {
+  ?s ?p ?o
+}
+LIMIT 20
 }
 
 @main(Some(context), titleLabel = context.task.taskLabel())(header)(toolbar)(content)
diff --git a/silk-workbench/silk-workbench-workspace/app/views/workspace/dataset/table.scala.html b/silk-workbench/silk-workbench-workspace/app/views/workspace/dataset/table.scala.html
@@ -6,27 +6,37 @@
 @(context: Context[GenericDatasetSpec], paths: IndexedSeq[UntypedPath], entities: Seq[Entity])(implicit session: play.api.mvc.Session)
 
 @header = {
+  <style>
+    /* Make the content container scrollable */
+    .mdl-layout__content
+    {
+      overflow-x: auto !important;
+    }
+  </style>
 }
 
 @toolbar = {
 }
 
 @content = {
-<table>
-  <tr>
-    @for(path <- paths) {
-      <th>@path.toString<th>
-    }
-  </tr>
-
-  @for(entity <- entities) {
-    <tr>
-      @for(path <- paths) {
-        <td>@entity.evaluate(path)<td>
+  <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
+    <thead>
+      <tr>
+        @for(path <- paths) {
+          <th class="mdl-data-table__cell--non-numeric">@path.toString<th>
+        }
+      </tr>
+    </thead>
+    <tbody>
+      @for(entity <- entities) {
+        <tr>
+          @for(path <- paths) {
+            <td class="mdl-data-table__cell--non-numeric" style="white-space: normal">@entity.evaluate(path)<td>
+          }
+        </tr>
       }
-    </tr>
-  }
-</table>
+    </tbody>
+  </table>
 }
 
 @main(Some(context), titleLabel = context.task.taskLabel())(header)(toolbar)(content)
diff --git a/silk-workbench/silk-workbench-workspace/app/views/workspace/workspace.scala.html b/silk-workbench/silk-workbench-workspace/app/views/workspace/workspace.scala.html
@@ -25,9 +25,13 @@
 }
 
 @content = {
-  <div id="workspace_tree" >
-    <div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
-    <!--<img src="@Assets.at("img/pending.gif")">-->
+  <div class="mdl-card mdl-shadow--2dp mdl-card--stretch">
+    <div class="mdl-card__content">
+      <div id="workspace_tree" >
+        <div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
+        <!--<img src="@Assets.at("img/pending.gif")">-->
+      </div>
+    </div>
   </div>
 }