Merge pull request #125 from navikt/visning-topp

Designendringer toppseksjon

Author: bdahle

xp-archive/client/content/Content.module.css

@@ -6,12 +6,14 @@
 }
 
 .top {
-    padding: 1rem;
     background-color: var(--a-surface-subtle);
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
-    gap: 1.5rem;
-    align-items: flex-end;
+}
+
+.label {
+    margin-bottom: 0.5rem;
 }
 
 .versionSelector {
@@ -23,7 +25,37 @@
     background-color: white;
 }
 
+.versionAndViewWrapper {
+    display: flex;
+    gap: 1rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 1rem;
+    padding-bottom: 0.25rem;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.viewSelector {
+    display: flex;
+    flex-direction: column;
+}
+
 .viewSelectorWrapper {
     display: flex;
     gap: 1rem;
 }
+
+.titleAndUrl {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem 1.5rem;
+    align-items: center;
+}
+
+.url {
+    background-color: var(--a-deepblue-100);
+    height: fit-content;
+    padding: 0.25rem 0.75rem;
+    border-radius: 10rem;
+}

xp-archive/client/content/Content.tsx

@@ -83,51 +83,59 @@ export const Content = () => {
     return (
         <div className={style.content}>
             <div className={style.top}>
-                <div>
-                    <Detail spacing>{data?.json._path ?? ''}</Detail>
-                    <Heading size={'medium'} level={'2'} spacing>
-                        {data?.json.displayName ?? ''}
-                    </Heading>
-                    <div className={style.viewSelectorWrapper}>
-                        <ViewSelector
-                            selectedView={selectedView}
-                            setSelectedView={setSelectedView}
-                            hasAttachment={hasAttachment}
-                            isWebpage={isWebpage}
-                        />
+                <div className={style.versionAndViewWrapper}>
+                    <div className={style.versionSelector}>
+                        <Label className={style.label}>Versjoner</Label>
                         <Button
-                            as={'a'}
-                            href={htmlPath}
-                            icon={<ExternalLinkIcon />}
+                            className={style.versionButton}
+                            variant={'secondary'}
+                            icon={<SidebarRightIcon />}
                             iconPosition={'right'}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                window.open(htmlPath, '_blank');
-                            }}
+                            onClick={() => setIsVersionPanelOpen(true)}
                         >
-                            {'Åpne i nytt vindu'}
+                            {getVersionDisplay()}
                         </Button>
+                        <VersionSelector
+                            versions={data?.versions || []}
+                            isOpen={isVersionPanelOpen}
+                            onClose={() => setIsVersionPanelOpen(false)}
+                        />
+                    </div>
+                    <div className={style.viewSelector}>
+                        <Label className={style.label}>Visning</Label>
+                        <div className={style.viewSelectorWrapper}>
+                            <ViewSelector
+                                selectedView={selectedView}
+                                setSelectedView={setSelectedView}
+                                hasAttachment={hasAttachment}
+                                isWebpage={isWebpage}
+                            />
+                            <Button
+                                as={'a'}
+                                href={htmlPath}
+                                icon={<ExternalLinkIcon />}
+                                iconPosition={'right'}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    window.open(htmlPath, '_blank');
+                                }}
+                            >
+                                {'Åpne i nytt vindu'}
+                            </Button>
+                        </div>
                     </div>
                 </div>
 
-                <div className={style.versionSelector}>
-                    <Label spacing>Versjoner</Label>
-                    <Button
-                        className={style.versionButton}
-                        variant={'secondary'}
-                        icon={<SidebarRightIcon />}
-                        iconPosition={'right'}
-                        onClick={() => setIsVersionPanelOpen(true)}
-                    >
-                        {getVersionDisplay()}
-                    </Button>
-                    <VersionSelector
-                        versions={data?.versions || []}
-                        isOpen={isVersionPanelOpen}
-                        onClose={() => setIsVersionPanelOpen(false)}
-                    />
+                <div className={style.titleAndUrl}>
+                    <Heading size={'medium'} level={'2'}>
+                        {data?.json.displayName ?? ''}
+                    </Heading>
+                    <div className={style.url}>
+                        <Detail>{data?.json._path ?? ''}</Detail>
+                    </div>
                 </div>
             </div>
+
             <ContentView
                 selectedView={selectedView || getDefaultView(isWebpage, hasAttachment)}
                 isLoading={isLoading}

xp-archive/client/versionSelector/SlidePanel/SlidePanel.module.css

@@ -13,7 +13,7 @@
     border: none;
     margin: 0;
     display: flex;
-    justify-content: flex-end;
+    justify-content: flex-start;
 }
 
 .panel {
@@ -22,10 +22,10 @@
     width: 400px;
     height: 100vh;
     background: var(--a-surface-default);
-    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
     padding: 24px 20px;
     overflow-y: auto;
-    transform: translateX(100%);
+    transform: translateX(-100%);
     animation: slideIn 0.2s ease-out forwards;
     margin: 0;
 }