layout fixes

Author: silverwind

templates/repo/activity.tmpl

@@ -1,11 +1,11 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository commits">
 	{{template "repo/header" .}}
-	<div class="ui container stackable grid">
-		<div class="four wide column">
+	<div class="ui container flex-container">
+		<div class="flex-container-nav">
 			{{template "repo/navbar" .}}
 		</div>
-		<div class="twelve wide column">
+		<div class="flex-container-main">
 			{{if .PageIsPulse}}{{template "repo/pulse" .}}{{end}}
 			{{if .PageIsContributors}}{{template "repo/contributors" .}}{{end}}
 		</div>

templates/repo/pulse.tmpl

@@ -17,7 +17,6 @@
 		</div>
 	</div>
 </h2>
-<div class="divider"></div>
 
 {{if (or (.Permission.CanRead $.UnitTypeIssues) (.Permission.CanRead $.UnitTypePullRequests))}}
 <h4 class="ui top attached header">{{ctx.Locale.Tr "repo.activity.overview"}}</h4>

web_src/js/components/RepoContributors.vue

@@ -275,32 +275,33 @@ export default {
 
 <template>
   <div>
-    <h2 class="ui header">
-      <relative-time
-        v-if="dateFrom !== null"
-        format="datetime"
-        year="numeric"
-        month="short"
-        day="numeric"
-        weekday=""
-        :datetime="dateFrom"
-      >
-        {{ dateFrom }}
-      </relative-time>
-      {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "-" }}
-      <relative-time
-        v-if="dateUntil !== null"
-        format="datetime"
-        year="numeric"
-        month="short"
-        day="numeric"
-        weekday=""
-        :datetime="dateUntil"
-      >
-        {{ dateUntil }}
-      </relative-time>
-
-      <div class="ui right">
+    <h2 class="ui header gt-df gt-ac gt-sb">
+      <div>
+        <relative-time
+          v-if="dateFrom !== null"
+          format="datetime"
+          year="numeric"
+          month="short"
+          day="numeric"
+          weekday=""
+          :datetime="dateFrom"
+        >
+          {{ dateFrom }}
+        </relative-time>
+        {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "-" }}
+        <relative-time
+          v-if="dateUntil !== null"
+          format="datetime"
+          year="numeric"
+          month="short"
+          day="numeric"
+          weekday=""
+          :datetime="dateUntil"
+        >
+          {{ dateUntil }}
+        </relative-time>
+      </div>
+      <div>
         <!-- Contribution type -->
         <div class="ui dropdown jump" id="dropdown">
           <div class="ui basic compact button">
@@ -323,8 +324,7 @@ export default {
         </div>
       </div>
     </h2>
-    <div class="divider"/>
-    <div class="gt-df main-graph">
+    <div class="gt-df ui segment main-graph">
       <div v-if="isLoading || errorText !== ''" class="gt-tc gt-m-auto">
         <div v-if="isLoading">
           <SvgIcon name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
@@ -340,11 +340,9 @@ export default {
         :data="toGraphData(totalStats.weeks)" :options="getOptions('main')"
       />
     </div>
-    <div class="divider"/>
-
-    <div class="ui attached two column grid">
+    <div class="contributor-grid">
       <div
-        v-for="(contributor, index) in sortedContributors" :key="index" class="column stats-table"
+        v-for="(contributor, index) in sortedContributors" :key="index" class="stats-table"
         v-memo="[sortedContributors, type]"
       >
         <div class="ui top attached header gt-df gt-f1">
@@ -379,4 +377,9 @@ export default {
 .main-graph {
   height: 380px;
 }
+.contributor-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
 </style>