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)

{{ pkginfo.name }} {{ pkginfo.version }}

+
+ +
+ @@ -72,8 +77,6 @@ requestPackageInfo(route.params.packageName)
- View PKGBUILD -

Dependencies

{{ dep }}

{{ optdep }} (optional)