@ndla/ui 50.9.4 → 50.9.6

package/src/locale/messages-sma.ts

@@ -1076,6 +1076,25 @@ const messages = {
         title: "Arena administrator",
         description: "Verktøy for å moderere og administrere arenaen.",
         administrate: "Administrer",
+        category: {
+          deleteSnack: "Kategorien har blitt slettet.",
+          notVisible: "Kategorien er ikke synlig",
+          edit: "Rediger kategori",
+          startEditing: "Rediger kategorier",
+          stopEditing: "Avslutt redigering",
+          form: {
+            formTitle: "Kategori",
+            newCategory: "Ny kategori",
+            editCategory: "Rediger kategori",
+            title: "Tittel",
+            description: "Beskrivelse",
+            visible: "Synlighet",
+            deleteText: "Slett kategori",
+            modalTitle: "Slett kategori",
+            modalDescription:
+              "Er du sikker på at du vil slette kategorien, med alt innhold? Dette er irreversibelt og kan ikke angres.",
+          },
+        },
         users: {
           title: "Brukere",
           description: "Liste over alle brukere av arena. Trykk på brukere for å moderere de.",
@@ -1087,6 +1106,7 @@ const messages = {
           isAdmin: "Administrator",
           selectAdministrator: 'Gjør "{{user}}" til administrator.',
           enableArena: 'Gi "{{user}}" tilgang til arena.',
+          noUsers: "Ingen brukere funnet.",
         },
         flags: {
           title: "Flagg",
@@ -1103,6 +1123,8 @@ const messages = {
           numFlags: "Antall flagg",
           latestFlag: "Siste flagging",
           noflags: "Ingen flaggede poster funnet",
+          solvedFor: "Løst for",
+          goToTopic: "Gå til tråd",
           status: {
             title: "Status",
             resolved: "Løst",
@@ -1265,6 +1287,15 @@ const messages = {
       onDragCancel: "Flytting avbrutt. Ressursen {{name}} ble sluppet",
       dragHandle: "Sorter ressursen {{name}}",
     },
+    category: {
+      onDragStart: "Plukket opp kategorien {{name}}. Kategorien er på posisjon {{index}} av {{length}}",
+      onDragOver: "Kategorien {{name}} ble flyttet til posisjon {{index}} av {{length}}",
+      onDragOverMissingOver: "Kategorien {{name}} er ikke lenger over et slippbart område",
+      onDragEnd: "Kategorien {{name}} ble sluppet på posisjon {{index}} av {{length}}",
+      onDragEndMissingOver: "Kategorien {{name}} ble sluppet",
+      onDragCancel: "Flytting avbrutt. Kategorien {{name}} ble sluppet",
+      dragHandle: "Sorter kategorien {{name}}",
+    },
     favoriteSubjects: {
       title: "Mine favorittfag",
       subjects: "{{count}} fag",

package/src/main.scss

@@ -1,9 +1,8 @@
 // @import '~ndla-core/scss/core';
 
 // COMPONENTS
-@import 'Logo/component.logo';
-@import 'Article/component.article';
+@import "Logo/component.logo";
+@import "Article/component.article";
 
-@import 'Figure/component.figure';
-@import 'Filter/component.filter';
-@import 'Search/component.search';
+@import "Figure/component.figure";
+@import "Filter/component.filter";

package/src/Search/component.search-field.scss

@@ -1,122 +0,0 @@
-.c-search-field {
-  display: flex;
-  align-items: center;
-  text-align: left;
-  flex-direction: column;
-  justify-content: center;
-
-  @include mq(desktop) {
-    &--has-search-result {
-      .c-search-field {
-        &__input {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-
-        &__filters {
-          border-bottom-left-radius: 0;
-        }
-      }
-    }
-  }
-
-  @supports (-webkit-overflow-scrolling: touch) {
-    .c-search-field__search-result {
-      padding-bottom: $spacing--large + $spacing;
-    }
-    &--input-has-focus {
-      .c-search-field__search-result {
-        @supports (-webkit-overflow-scrolling: touch) {
-          padding-bottom: 300px;
-        }
-      }
-    }
-  }
-
-  &--no-left-margin {
-    margin-left: 0 !important;
-  }
-
-  &__filters {
-    display: flex;
-    height: 48px;
-    background: $white;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-    border: 1px solid $brand-grey--light;
-    padding-left: $spacing--small;
-    padding-right: 0;
-    border-right: 0;
-    flex-shrink: 0;
-    align-items: center;
-
-    @include mq($from: mobileWide, $until: desktop) {
-      padding-right: $spacing--small / 2;
-    }
-
-    @include mq(tablet) {
-      height: 58px;
-      padding-right: $spacing--small;
-    }
-
-    .c-active-filters {
-      display: none;
-
-      @include mq(tabletWide) {
-        display: flex;
-        li {
-          margin-bottom: 0;
-        }
-      }
-      @include mq($until: desktop) {
-        padding-right: $spacing--small;
-      }
-    }
-  }
-
-  &__button {
-    position: absolute;
-    cursor: pointer;
-    background: none;
-    border: 0;
-    padding: $spacing--small;
-
-    @include mq(tablet) {
-      top: 5px;
-      right: 10px;
-    }
-
-    svg {
-      width: 24px;
-      height: 24px;
-      color: $brand-color--dark;
-    }
-  }
-
-  &__input-wrapper {
-    width: 100%;
-    padding: 0 $spacing--large 0 $spacing;
-    display: flex;
-    align-items: center;
-    flex-flow: row-reverse;
-    @include mq(tablet) {
-      position: relative;
-      padding: 0;
-    }
-  }
-
-  /** Header adjustments... */
-  &__button--close {
-    right: $spacing--large;
-    @include mq(tablet) {
-      transform: translateY(3px);
-    }
-    @include font-size(14px, 16px);
-    text-transform: uppercase;
-    color: $text-light-color;
-    &:hover,
-    &:focus {
-      color: $brand-color;
-    }
-  }
-}

package/src/Search/component.search-result.scss

@@ -1,355 +0,0 @@
-.c-search-result {
-  background: $white;
-  padding: 0 0 $spacing 0;
-  margin-bottom: $spacing--large;
-  border: 1px solid $brand-grey--light;
-
-  @include mq(desktop) {
-    padding: $spacing--medium;
-  }
-
-  &__heading-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0;
-  }
-
-  &__heading {
-    display: none;
-    margin: 0;
-    @include font-size(24px, 32px);
-    font-weight: 400;
-
-    @include mq(desktop) {
-      display: block;
-    }
-
-    span {
-      font-weight: 600;
-    }
-  }
-
-  & > h2 {
-    @include visually-hidden();
-  }
-
-  &__narrow-result {
-    @include mq(desktop) {
-      display: none;
-    }
-  }
-
-  .c-search-filter {
-    display: none;
-
-    @include mq(desktop) {
-      display: block;
-    }
-  }
-
-  &__current-goal {
-    margin: $spacing--medium $spacing 0 $spacing--small * 1.4;
-
-    li {
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  &__current-goal-info {
-    margin: $spacing--small 0 $spacing--large $spacing--large + 2;
-    @include font-size(16px, 20px);
-    @include mq(desktop) {
-      margin-left: $spacing--small + 4px;
-    }
-  }
-
-  &__competence-goals {
-    background: $brand-color--lighter;
-    padding: $spacing + $spacing--large $spacing $spacing;
-    margin-top: -24px - $spacing--large;
-    margin-bottom: -$spacing;
-    @include mq(desktop) {
-      margin-top: $spacing;
-      margin-bottom: $spacing;
-    }
-  }
-
-  &__close-competencegoals-btn {
-    @include mq($until: desktop) {
-      margin-top: $spacing--large;
-      margin-left: $spacing + $spacing--small;
-    }
-    @include mq($until: mobileWide) {
-      margin-left: $spacing;
-    }
-  }
-
-  &__result-label {
-    margin: 0;
-    font-weight: 600;
-    @include font-size(14px, 32px);
-    margin-bottom: $spacing--small / 2;
-
-    @include mq(desktop) {
-      @include font-size(18px, 32px);
-      margin-bottom: 0;
-    }
-    &--large-screen {
-      @include mq($until: desktop) {
-        display: none;
-      }
-    }
-    &--small-screen {
-      @include mq(desktop) {
-        display: none;
-      }
-    }
-  }
-}
-
-.c-search-result-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  @include mq(desktop) {
-    margin: $spacing--medium 0 0 0;
-  }
-
-  &__empty {
-    margin-top: $spacing--large;
-    h1 {
-      @include font-size(22px, 32px);
-      font-weight: $font-weight-bold;
-      margin: 0 0 $spacing--small;
-    }
-
-    p {
-      @include font-size(16px, 22px);
-      margin: 0;
-      font-family: $font-serif;
-
-      @include mq(desktop) {
-        @include font-size(18px, 32px);
-      }
-    }
-  }
-}
-
-.c-search-result-item {
-  border-bottom: 1px solid $brand-grey--light;
-  padding: 0 $spacing 0 $spacing;
-
-  @include mq(desktop) {
-    padding: 0;
-  }
-
-  margin: 0 0 $spacing;
-
-  &:first-child {
-    margin-top: $spacing;
-  }
-
-  &:last-child {
-    border-bottom: 0;
-    margin-bottom: 0;
-  }
-
-  &__content {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-
-    & > img,
-    & > picture > img {
-      width: 75px;
-      height: auto;
-      flex-shrink: 0;
-      margin: 0 0 $spacing--small $spacing--small;
-
-      @include mq(tabletWide) {
-        width: 80px;
-        margin-left: $spacing;
-        margin-right: $spacing--small;
-      }
-    }
-  }
-
-  &__ingress {
-    margin: 0 0 $spacing 0;
-    width: 100%;
-
-    @include font-size(14px, 22px);
-    flex-grow: 1;
-
-    @include mq(tablet) {
-      @include font-size(16px, 24px);
-      max-width: 550px;
-    }
-
-    @include mq(desktop) {
-      @include font-size(18px, 26px);
-      max-width: 600px;
-    }
-  }
-
-  &__header {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-
-    > * {
-      margin: 0 $spacing--small $spacing--small 0;
-    }
-
-    @include mq($until: tablet) {
-      h1 {
-        width: 100%;
-      }
-    }
-  }
-
-  &__content-type-wrapper {
-    margin: 0 $spacing--small $spacing--small 0;
-    display: flex;
-    align-items: center;
-  }
-
-  &__additional {
-    display: flex;
-    align-items: center;
-  }
-
-  &__content-type-label {
-    color: $text-light-color;
-    text-transform: uppercase;
-    @include font-size(14px, 18px);
-    // display: none;
-    margin-top: 2px;
-    /*
-    @include mq(desktop) {
-      display: inline;
-    }
-    */
-  }
-
-  &__pills {
-    background: $brand-grey--lightest;
-    margin-right: $spacing--small;
-    padding: 0 $spacing--small / 3;
-    border-radius: $border-radius;
-    @include font-size(12px, 20px);
-    font-weight: $font-weight-semibold;
-  }
-
-  &__breadcrumb {
-    list-style: none;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    color: $text-light-color;
-    margin-bottom: $spacing;
-
-    @include font-size(14px, 18px);
-
-    @include mq(desktop) {
-      @include font-size(16px, 24px);
-    }
-
-    [data-icon] {
-      width: 12px;
-      height: 12px;
-      margin: 0 $spacing--small/3;
-
-      @include mq(desktop) {
-        margin: 0 $spacing--small/2;
-      }
-    }
-  }
-
-  &__subjects {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-bottom: $spacing;
-    @include font-size(14px, 16px);
-
-    @include mq(desktop) {
-      @include font-size(16px, 18px);
-    }
-
-    & > span {
-      text-transform: uppercase;
-      color: $text-light-color;
-      padding-right: $spacing--small;
-      @include font-size(14px, 16px);
-    }
-
-    ul {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      list-style: none;
-      padding: 0;
-    }
-
-    li {
-      margin: 0;
-      position: relative;
-      line-height: 1rem;
-
-      padding: 0 $spacing--small/2 0 0;
-      margin-right: $spacing--small/2;
-
-      @include mq(desktop) {
-        padding: 0 $spacing--small 0 0;
-        margin-right: $spacing--small;
-      }
-
-      &:after {
-        content: '';
-        width: 1px;
-        height: 15px;
-        background: $brand-grey--light;
-        display: block;
-        position: absolute;
-        right: 0;
-        top: 3px;
-      }
-
-      &:first-child {
-        font-weight: 600;
-      }
-
-      &:last-child {
-        &:after {
-          display: none;
-        }
-
-        margin-right: 0;
-      }
-    }
-  }
-
-  h1 {
-    font-weight: 600;
-    @include font-size(16px, 20px);
-
-    @include mq(desktop) {
-      @include font-size(22px, 28px);
-    }
-
-    a {
-      color: $brand-color--dark;
-
-      &:hover,
-      &:focus,
-      &:active {
-        color: $brand-color--dark;
-      }
-    }
-  }
-}

package/src/Search/component.search.scss

@@ -1,2 +0,0 @@
-@import './component.search-field';
-@import './component.search-result';