diff --git a/frontend/src/components/PackageInfo/PackageActions.vue b/frontend/src/components/PackageInfo/PackageActions.vue
new file mode 100644
index 0000000..5fb6fcd
--- /dev/null
+++ b/frontend/src/components/PackageInfo/PackageActions.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
diff --git a/frontend/src/style/_pkginfo.scss b/frontend/src/style/_pkginfo.scss
index 03b5ae5..c76452d 100644
--- a/frontend/src/style/_pkginfo.scss
+++ b/frontend/src/style/_pkginfo.scss
@@ -13,6 +13,24 @@ table.pkginfo {
}
}
+.right-things {
+ float: right;
+}
+
+#actionlist {
+ padding: .5em;
+ margin-bottom: 1em;
+ background: var(--package-actions-box-bg);
+ border: 1px solid var(--package-actions-box-border-color);
+
+ ul {
+ list-style: none;
+ padding: 0;
+ margin-bottom: 0;
+ font-size: .846em;
+ }
+}
+
.pkginfo-section {
background: #555;
color: #fff;
diff --git a/frontend/src/style/_variable.scss b/frontend/src/style/_variable.scss
index 1873ef4..f5409df 100644
--- a/frontend/src/style/_variable.scss
+++ b/frontend/src/style/_variable.scss
@@ -3,10 +3,15 @@
--fg: #000;
--bg: #fff;
+ --link-fg: #08c;
+
--box-bg: #ecf2f5;
--index-thead-border: #000;
--index-item-hover: #ffd;
+
+ --package-actions-box-bg: #eee;
+ --package-actions-box-border-color: #bbb;
}
}
@@ -15,9 +20,14 @@
--fg: rgba(255, 255, 255, 0.87);
--bg: #000;
+ --link-fg: rgb(140, 140, 255);
+
--box-bg: #212427;
--index-thead-border: #fff;
--index-item-hover: #424242;
+
+ --package-actions-box-bg: #222;
+ --package-actions-box-border-color: #fff;
}
}
diff --git a/frontend/src/style/main.scss b/frontend/src/style/main.scss
index eb52170..e91775b 100644
--- a/frontend/src/style/main.scss
+++ b/frontend/src/style/main.scss
@@ -9,6 +9,19 @@
padding: 0;
}
+a {
+ text-decoration: none;
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+a:link,
+a:visited
+{
+ color: var(--link-fg);
+}
+
.content {
padding: 15px;
}
diff --git a/frontend/src/views/Package.vue b/frontend/src/views/Package.vue
index 2275b66..36f5005 100644
--- a/frontend/src/views/Package.vue
+++ b/frontend/src/views/Package.vue
@@ -2,6 +2,7 @@
import { ref } from 'vue'
import { useRoute } from 'vue-router'
+import PackageActions from '@/components/PackageInfo/PackageActions.vue'
import ViewDetail from '@/components/PackageInfo/ViewDetail.vue'
import moment from 'moment'
@@ -35,6 +36,10 @@ requestPackageInfo(route.params.packageName)
+
+
@@ -72,8 +77,6 @@ requestPackageInfo(route.params.packageName)
-
View PKGBUILD
-
Dependencies
{{ dep }}
{{ optdep }} (optional)