Changeset 4448

Timestamp:

02/05/14 15:13:24 (10 years ago)

Author:

twagoo

Message:

new icons and presentation of resources in record page

Location:

vlo/branches/vlo-3.0/vlo-web-app/src/main/html

Files:

• record1.html (modified) (2 diffs)
• style/Crystal_Clear_mimetype_readme.png (deleted)
• style/audio-file-3-256.png (added)
• style/audio-x-generic.png (deleted)
• style/document-256.png (added)
• style/external-link-128.png (added)
• style/image-file-256.png (added)
• style/text-x-generic.png (deleted)
• style/text-x-log.png (deleted)
• style/video-file-3-256.png (added)
• style/video-x-generic.png (deleted)
• style/vlo-record.css (modified) (5 diffs)

vlo/branches/vlo-3.0/vlo-web-app/src/main/html/record1.html

@@ -67 +67 @@
                     < previous
                     | <a href="">next &gt;</a><br />
+                    Record 1 of 604056 &nbsp;&nbsp;
                 </div>
                 <h1 id="recordtitle">&quot;Chinese Democratie en de Transformatie&quot;</h1>
                 <div id="recorddetails">
+                    <a id="recordlandingpage" href="http://dspace.library.uu.nl/handle/1874/235456">Show this record in its original context</a>
                     <table class="recorddetailstable">
                         <tbody class="attributesTbody">
@@ -119 +121 @@
                 </div>
 
-                <div id="recordreferences">
-                    <div id="recordlandingpage">
-                        <h2>Landing page</h2>
-                        <p>
-                            The following link points to the original context of the present record, as indicated by the provider of the metadata:
-                        </p>
-                        <div><a href="">http://dspace.library.uu.nl/handle/1874/235456</a></div>
-                    </div>
-                    <div id="recordresources">
-                        <h2>Resources</h2>
-                        <p>The following links point to the original resources described by the present record:</p>
-                        <div class="writtenresource"><a href="">http://dspace.library.uu.nl/bitstream/1874/235456/1/Bachelorscriptie+Rene+Witteveen+3375005.docx</a></div>
-                        <div class="audioresource"><a href="">http://corpus1.mpi.nl/qfs1/media-archive/dobes_data/Ache/Documentaci_n_-_Documentation/Comunidades_-_Communities/Cerro_Moroti/Media/002-djawu_klluu-2011-09-01.wav</a></div>
-                        <div class="annotationresource"><a href="">http://corpus1.mpi.nl/qfs1/media-archive/dobes_data/Ache/Documentaci_n_-_Documentation/Comunidades_-_Communities/Cerro_Moroti/Annotations/002-djawu_klluu-2011-09-01.eaf</a></div>
-                    </div>
+                <div id="recordresources">
+                    <a class="writtenresource" href="http://dspace.library.uu.nl/bitstream/1874/235456/1/Bachelorscriptie+Rene+Witteveen+3375005.docx">Bachelorscriptie+Rene+Witteveen+3375005.docx</a>
+                    <a class="audioresource" href="http://corpus1.mpi.nl/qfs1/media-archive/dobes_data/Ache/Documentaci_n_-_Documentation/Comunidades_-_Communities/Cerro_Moroti/Media/002-djawu_klluu-2011-09-01.wav">002-djawu_klluu-2011-09-01.wav</a>
+                    <a class="imageresource" href="http://corpus1.mpi.nl/qfs1/media-archive/dobes_data/Ache/Documentaci_n_-_Documentation/Comunidades_-_Communities/Cerro_Moroti/Annotations/002-djawu_klluu-2011-09-01.eaf">002-djawu_klluu-2011-09-01.eaf</a>
                 </div>
 

vlo/branches/vlo-3.0/vlo-web-app/src/main/html/style/vlo-record.css

@@ -39 +39 @@
 }
 
+a#recordlandingpage {
+    display: inline-block;
+    padding-left: 20px;
+    background-image: url('external-link-128.png');
+    background-size: 12px;
+    background-repeat: no-repeat;
+    background-position: initial;
+}
+
 ul#recordcontextfacets {
     margin-top: 0px;
@@ -47 +56 @@
 }
 
-#recordreferences {
-    margin-top: 1em;
-    text-align: left;
-}
-
-#recordreferences > div {
-    margin-top: 1em;
-}
-
-#recordreferences div div {
-    /* div that has resource link or landing page */
-    min-height: 36px;
-    padding-left: 36px;
-}
-
-#recordreferences div div a, #recordreferences div div a:hover {
-    display: inline-block;
-    padding-top: .5em;
-}
-
 /* record title with prev/next links */
 
 h1#recordtitle {
-    max-width: 80%;
+    max-width: 70%;
     clear: left;
 }
 
 #recordprevnext {
-    width: 15%;
+    width: 25%;
     float: right;
     clear: right;
+    text-align: right;
 }
 
@@ -86 +76 @@
 
 table.recorddetailstable {
+    margin-top: 1em;
     border-collapse: collapse;
     border-top: 1px solid #999;
@@ -112 +103 @@
 }
 
-/* icons for record references */
-#recordlandingpage div {
-    background: url('Crystal_Clear_mimetype_readme.png') no-repeat;
+
+#recordresources {
+    clear: both;
+    margin: 2em 0;
 }
 
-#recordresources div.writtenresource {
-    background: url('text-x-generic.png') no-repeat;
+#recordresources a {
+    display: inline-block;
+    float: left;
+    width: 128px;
+    padding: 74px 10px 0px 10px;
+    background-repeat: no-repeat;
+    background-position: center 5px;
+    background-size: 64px;
+    word-break: break-all;
+    text-align: center;
 }
 
-#recordresources div.audioresource {
-    background: url('audio-x-generic.png') no-repeat;
+#recordresources a:hover {
+    background-color: #ccc;
 }
 
-#recordresources div.videoresource {
-    background: url('video-x-generic.png') no-repeat;
+
+#recordresources a.writtenresource {
+    background-image: url('document-256.png'); /* icon from icons8.com */
 }
 
-#recordresources div.annotationresource {
-    background: url('text-x-log.png') no-repeat;
+#recordresources a.audioresource {
+    background-image: url('audio-file-3-256.png'); /* icon from icons8.com */
 }
 
-#recordtechnicaldetailstoggle{
-    margin-top: 2em;
-    padding-bottom: 0px;
+#recordresources a.videoresource {
+    background-image: url('video-file-3-256.png'); /* icon from icons8.com */
+}
+
+#recordresources a.imageresource {
+    background-image: url('image-file-256.png'); /* icon from icons8.com */
+}
+
+#recordtechnicaldetailstoggle {
+    clear: both;
+    padding: 4em 0 0 0;
+}
+
+#showrecordtechnicaldetails:before {
+    content: '+ ';
+}
+
+
+#hiderecordtechnicaldetails:before {
+    content: '- ';
 }
 
 #recordtechnicaldetails {
     border-top: 1px dashed;
-    padding-top: 1em;
+    padding: 1em 0;
 }
 
@@ -148 +166 @@
 
 #recordcmdi article {
-    position: relative;
-    max-height: 400px;
-    overflow: auto;
+/*  max-height: 400px;
+    overflow: auto;*/
     margin-top: 1em;
+    padding: 1em;
 }