Revision 4f3fc1ed
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/pithos_containers.html | ||
|---|---|---|
| 70 | 70 |
<section class="main row containers"> |
| 71 | 71 |
<div class="storage entities list-view"> |
| 72 | 72 |
<ul class="items-list"> |
| 73 |
<li> |
|
| 73 |
<li class="folder">
|
|
| 74 | 74 |
<div class="basic-data col"> |
| 75 | 75 |
<div class="img-wrap"> |
| 76 |
<span class="snf-folder-full"></span> |
|
| 77 | 76 |
<span class="snf-pithos-outline"></span> |
| 78 | 77 |
</div> |
| 79 | 78 |
<h4>Pithos</h4> |
| ... | ... | |
| 86 | 85 |
</div> |
| 87 | 86 |
<span class="size">2 GB of 50 GB used</span> |
| 88 | 87 |
</div> |
| 89 |
<h5>Basic Project</h5>
|
|
| 88 |
<h5>mySuperProject.ece.ntua.gr</h5>
|
|
| 90 | 89 |
<div class="project col"> |
| 91 | 90 |
<a class="btn-more"> |
| 92 | 91 |
<em>reassign</em> |
| ... | ... | |
| 99 | 98 |
</ul> |
| 100 | 99 |
</div> |
| 101 | 100 |
</li> |
| 102 |
<li> |
|
| 101 |
<li class="folder">
|
|
| 103 | 102 |
<div class="basic-data col"> |
| 104 | 103 |
<div class="img-wrap"> |
| 105 |
<span class="snf-folder-full"></span> |
|
| 106 | 104 |
<span class="snf-image-outline"></span> |
| 107 | 105 |
</div> |
| 108 | 106 |
<h4>Images</h4> |
| ... | ... | |
| 115 | 113 |
</div> |
| 116 | 114 |
<span class="size">2 GB of 50 GB used</span> |
| 117 | 115 |
</div> |
| 118 |
<h5>Basic Project</h5>
|
|
| 116 |
<h5>images.gr</h5>
|
|
| 119 | 117 |
<div class="project col"> |
| 120 | 118 |
<a class="btn-more"> |
| 121 | 119 |
<em>reassign</em> |
| ... | ... | |
| 123 | 121 |
</a> |
| 124 | 122 |
<ul> |
| 125 | 123 |
<li><a href="">another.project.okeanos</a></li> |
| 126 |
<li><a href="">another.project.okeanos</a></li>
|
|
| 127 |
<li><a href="">another.project.okeanos</a></li>
|
|
| 124 |
<li><a href="">project.okeanos.gr</a></li>
|
|
| 125 |
<li><a href="">test.com</a></li>
|
|
| 128 | 126 |
</ul> |
| 129 | 127 |
</div> |
| 130 | 128 |
</li> |
| 131 |
<li> |
|
| 129 |
<li class="folder">
|
|
| 132 | 130 |
<div class="basic-data col"> |
| 133 | 131 |
<div class="img-wrap"> |
| 134 |
<span class="snf-folder-full"></span> |
|
| 135 | 132 |
<span class="snf-snapshot-outline"></span> |
| 136 | 133 |
</div> |
| 137 | 134 |
<h4>Snaphots</h4> |
| ... | ... | |
| 144 | 141 |
</div> |
| 145 | 142 |
<span class="size">40 GB of 50 GB used</span> |
| 146 | 143 |
</div> |
| 147 |
<h5>Basic Project</h5>
|
|
| 144 |
<h5>project1.gr oisdfu soidfusioduf sdiofusido </h5>
|
|
| 148 | 145 |
<div class="project col"> |
| 149 | 146 |
<a class="btn-more"> |
| 150 | 147 |
<em>reassign</em> |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_storage.scss | ||
|---|---|---|
| 73 | 73 |
overflow: visible; |
| 74 | 74 |
&>li {
|
| 75 | 75 |
text-align: left; |
| 76 |
padding-right: 0;
|
|
| 77 |
padding-left: 0;
|
|
| 76 |
padding-right: 15px;
|
|
| 77 |
padding-left: 15px;
|
|
| 78 | 78 |
.col {
|
| 79 | 79 |
float: left; |
| 80 | 80 |
} |
| ... | ... | |
| 83 | 83 |
width: auto; |
| 84 | 84 |
} |
| 85 | 85 |
.basic-data {
|
| 86 |
width: 20%;
|
|
| 86 |
width: 250px;
|
|
| 87 | 87 |
} |
| 88 | 88 |
.size-data{
|
| 89 |
width: 40%;
|
|
| 89 |
width: 400px;
|
|
| 90 | 90 |
.progress-col {
|
| 91 | 91 |
padding-top: 7px; |
| 92 | 92 |
.progress {
|
| ... | ... | |
| 111 | 111 |
} |
| 112 | 112 |
h5 {
|
| 113 | 113 |
float: left; |
| 114 |
width: 20%;
|
|
| 114 |
width: 200px;
|
|
| 115 | 115 |
font-size: emCalc(14px); |
| 116 | 116 |
font-weight: normal; |
| 117 | 117 |
line-height: $list-icon-height; |
| 118 | 118 |
height: $list-icon-height; |
| 119 | 119 |
margin: 0; |
| 120 |
padding:0 20px; |
|
| 121 |
overflow: hidden; |
|
| 122 |
white-space: nowrap; |
|
| 120 | 123 |
} |
| 121 | 124 |
.project {
|
| 122 | 125 |
line-height: $list-icon-height; |
| 123 | 126 |
height: $list-icon-height; |
| 124 |
width: 18%;
|
|
| 127 |
width: 100px;
|
|
| 125 | 128 |
font-size: emCalc(14px); |
| 126 | 129 |
position: relative; |
| 127 | 130 |
right: 0; |
| ... | ... | |
| 135 | 138 |
display: none; |
| 136 | 139 |
z-index: 1; |
| 137 | 140 |
background: #fff; |
| 141 |
min-width: 100px + 200px; |
|
| 138 | 142 |
li {
|
| 139 |
padding: 4px 0;
|
|
| 143 |
padding: 6px 5px;
|
|
| 140 | 144 |
} |
| 141 | 145 |
} |
| 142 | 146 |
.btn-more {
|
| ... | ... | |
| 171 | 175 |
|
| 172 | 176 |
} |
| 173 | 177 |
.img-wrap {
|
| 174 |
.snf-folder-full {
|
|
| 175 |
font-size: emCalc(34px); |
|
| 176 |
color: $secondary-color; |
|
| 177 |
} |
|
| 178 |
span:not(.snf-folder-full) {
|
|
| 178 |
background-position: left center; |
|
| 179 |
text-align: left; |
|
| 180 |
span {
|
|
| 179 | 181 |
color: $gray-2; |
| 180 | 182 |
font-size: emCalc(16px); |
| 181 | 183 |
position: relative; |
| 182 |
bottom: 5px;
|
|
| 183 |
left: -28px;
|
|
| 184 |
top: 1px;
|
|
| 185 |
left: 23px;
|
|
| 184 | 186 |
} |
| 185 | 187 |
} |
| 186 |
|
|
| 187 | 188 |
} |
| 188 | 189 |
} |
| 189 | 190 |
} |
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css | ||
|---|---|---|
| 8859 | 8859 |
/* line 74, ../sass/_storage.scss */ |
| 8860 | 8860 |
.containers .items-list > li {
|
| 8861 | 8861 |
text-align: left; |
| 8862 |
padding-right: 0;
|
|
| 8863 |
padding-left: 0;
|
|
| 8862 |
padding-right: 15px;
|
|
| 8863 |
padding-left: 15px;
|
|
| 8864 | 8864 |
} |
| 8865 | 8865 |
/* line 78, ../sass/_storage.scss */ |
| 8866 | 8866 |
.containers .items-list > li .col {
|
| ... | ... | |
| 8873 | 8873 |
} |
| 8874 | 8874 |
/* line 85, ../sass/_storage.scss */ |
| 8875 | 8875 |
.containers .items-list > li .basic-data {
|
| 8876 |
width: 20%;
|
|
| 8876 |
width: 250px;
|
|
| 8877 | 8877 |
} |
| 8878 | 8878 |
/* line 88, ../sass/_storage.scss */ |
| 8879 | 8879 |
.containers .items-list > li .size-data {
|
| 8880 |
width: 40%;
|
|
| 8880 |
width: 400px;
|
|
| 8881 | 8881 |
} |
| 8882 | 8882 |
/* line 90, ../sass/_storage.scss */ |
| 8883 | 8883 |
.containers .items-list > li .size-data .progress-col {
|
| ... | ... | |
| 8907 | 8907 |
/* line 112, ../sass/_storage.scss */ |
| 8908 | 8908 |
.containers .items-list > li h5 {
|
| 8909 | 8909 |
float: left; |
| 8910 |
width: 20%;
|
|
| 8910 |
width: 200px;
|
|
| 8911 | 8911 |
font-size: 0.875em; |
| 8912 | 8912 |
font-weight: normal; |
| 8913 | 8913 |
line-height: 34px; |
| 8914 | 8914 |
height: 34px; |
| 8915 | 8915 |
margin: 0; |
| 8916 |
padding: 0 20px; |
|
| 8917 |
overflow: hidden; |
|
| 8918 |
white-space: nowrap; |
|
| 8916 | 8919 |
} |
| 8917 |
/* line 121, ../sass/_storage.scss */
|
|
| 8920 |
/* line 124, ../sass/_storage.scss */
|
|
| 8918 | 8921 |
.containers .items-list > li .project {
|
| 8919 | 8922 |
line-height: 34px; |
| 8920 | 8923 |
height: 34px; |
| 8921 |
width: 18%;
|
|
| 8924 |
width: 100px;
|
|
| 8922 | 8925 |
font-size: 0.875em; |
| 8923 | 8926 |
position: relative; |
| 8924 | 8927 |
right: 0; |
| 8925 | 8928 |
} |
| 8926 |
/* line 128, ../sass/_storage.scss */
|
|
| 8929 |
/* line 131, ../sass/_storage.scss */
|
|
| 8927 | 8930 |
.containers .items-list > li .project ul {
|
| 8928 | 8931 |
position: absolute; |
| 8929 | 8932 |
right: 0; |
| ... | ... | |
| 8934 | 8937 |
display: none; |
| 8935 | 8938 |
z-index: 1; |
| 8936 | 8939 |
background: #fff; |
| 8940 |
min-width: 300px; |
|
| 8937 | 8941 |
} |
| 8938 |
/* line 138, ../sass/_storage.scss */
|
|
| 8942 |
/* line 142, ../sass/_storage.scss */
|
|
| 8939 | 8943 |
.containers .items-list > li .project ul li {
|
| 8940 |
padding: 4px 0;
|
|
| 8944 |
padding: 6px 5px;
|
|
| 8941 | 8945 |
} |
| 8942 |
/* line 142, ../sass/_storage.scss */
|
|
| 8946 |
/* line 146, ../sass/_storage.scss */
|
|
| 8943 | 8947 |
.containers .items-list > li .project .btn-more {
|
| 8944 | 8948 |
border: 1px solid #485057; |
| 8945 | 8949 |
padding: 0 10px; |
| 8946 | 8950 |
float: right; |
| 8947 | 8951 |
} |
| 8948 |
/* line 146, ../sass/_storage.scss */
|
|
| 8952 |
/* line 150, ../sass/_storage.scss */
|
|
| 8949 | 8953 |
.containers .items-list > li .project .btn-more em {
|
| 8950 | 8954 |
display: none; |
| 8951 | 8955 |
opacity: 0; |
| ... | ... | |
| 8957 | 8961 |
-o-transition: opacity 300ms linear; |
| 8958 | 8962 |
transition: opacity 300ms linear; |
| 8959 | 8963 |
} |
| 8960 |
/* line 153, ../sass/_storage.scss */
|
|
| 8964 |
/* line 157, ../sass/_storage.scss */
|
|
| 8961 | 8965 |
.containers .items-list > li .project .btn-more:hover {
|
| 8962 | 8966 |
color: #485057; |
| 8963 | 8967 |
} |
| 8964 |
/* line 155, ../sass/_storage.scss */
|
|
| 8968 |
/* line 159, ../sass/_storage.scss */
|
|
| 8965 | 8969 |
.containers .items-list > li .project .btn-more:hover em {
|
| 8966 | 8970 |
display: inline-block; |
| 8967 | 8971 |
opacity: 1; |
| 8968 | 8972 |
} |
| 8969 |
/* line 160, ../sass/_storage.scss */
|
|
| 8973 |
/* line 164, ../sass/_storage.scss */
|
|
| 8970 | 8974 |
.containers .items-list > li .project .btn-more.clicked {
|
| 8971 | 8975 |
background-color: #485057; |
| 8972 | 8976 |
color: #fff; |
| 8973 | 8977 |
} |
| 8974 |
/* line 163, ../sass/_storage.scss */
|
|
| 8978 |
/* line 167, ../sass/_storage.scss */
|
|
| 8975 | 8979 |
.containers .items-list > li .project .btn-more.clicked em {
|
| 8976 | 8980 |
-webkit-transition: opacity 300ms linear; |
| 8977 | 8981 |
-moz-transition: opacity 300ms linear; |
| ... | ... | |
| 8982 | 8986 |
opacity: 1; |
| 8983 | 8987 |
color: #fff; |
| 8984 | 8988 |
} |
| 8985 |
/* line 174, ../sass/_storage.scss */
|
|
| 8986 |
.containers .items-list > li .img-wrap .snf-folder-full {
|
|
| 8987 |
font-size: 2.125em;
|
|
| 8988 |
color: #30c79e;
|
|
| 8989 |
/* line 177, ../sass/_storage.scss */
|
|
| 8990 |
.containers .items-list > li .img-wrap {
|
|
| 8991 |
background-position: left center;
|
|
| 8992 |
text-align: left;
|
|
| 8989 | 8993 |
} |
| 8990 |
/* line 178, ../sass/_storage.scss */
|
|
| 8991 |
.containers .items-list > li .img-wrap span:not(.snf-folder-full) {
|
|
| 8994 |
/* line 180, ../sass/_storage.scss */
|
|
| 8995 |
.containers .items-list > li .img-wrap span {
|
|
| 8992 | 8996 |
color: #485057; |
| 8993 | 8997 |
font-size: 1em; |
| 8994 | 8998 |
position: relative; |
| 8995 |
bottom: 5px;
|
|
| 8996 |
left: -28px;
|
|
| 8999 |
top: 1px;
|
|
| 9000 |
left: 23px;
|
|
| 8997 | 9001 |
} |
| 8998 | 9002 |
|
| 8999 |
/* line 191, ../sass/_storage.scss */
|
|
| 9003 |
/* line 192, ../sass/_storage.scss */
|
|
| 9000 | 9004 |
.storage-progress .items-list {
|
| 9001 | 9005 |
margin-bottom: 0; |
| 9002 | 9006 |
} |
| 9003 |
/* line 193, ../sass/_storage.scss */
|
|
| 9007 |
/* line 194, ../sass/_storage.scss */
|
|
| 9004 | 9008 |
.storage-progress .items-list li {
|
| 9005 | 9009 |
padding-left: 210px; |
| 9006 | 9010 |
color: #fff; |
| 9007 | 9011 |
} |
| 9008 |
/* line 196, ../sass/_storage.scss */
|
|
| 9012 |
/* line 197, ../sass/_storage.scss */
|
|
| 9009 | 9013 |
.storage-progress .items-list li .img-wrap {
|
| 9010 | 9014 |
top: 0; |
| 9011 | 9015 |
height: 34px; |
| 9012 | 9016 |
line-height: 34px; |
| 9013 | 9017 |
} |
| 9014 |
/* line 201, ../sass/_storage.scss */
|
|
| 9018 |
/* line 202, ../sass/_storage.scss */
|
|
| 9015 | 9019 |
.storage-progress .items-list li h4 {
|
| 9016 | 9020 |
width: 210px; |
| 9017 | 9021 |
height: 34px; |
| 9018 | 9022 |
line-height: 34px; |
| 9019 | 9023 |
} |
| 9020 |
/* line 206, ../sass/_storage.scss */
|
|
| 9024 |
/* line 207, ../sass/_storage.scss */
|
|
| 9021 | 9025 |
.storage-progress .items-list li .remove {
|
| 9022 | 9026 |
text-align: right; |
| 9023 | 9027 |
font-weight: bold; |
| 9024 | 9028 |
visibility: visible; |
| 9025 | 9029 |
} |
| 9026 |
/* line 210, ../sass/_storage.scss */
|
|
| 9030 |
/* line 211, ../sass/_storage.scss */
|
|
| 9027 | 9031 |
.storage-progress .items-list li .remove a {
|
| 9028 | 9032 |
color: #fff; |
| 9029 | 9033 |
} |
| 9030 |
/* line 213, ../sass/_storage.scss */
|
|
| 9034 |
/* line 214, ../sass/_storage.scss */
|
|
| 9031 | 9035 |
.storage-progress .items-list li .remove em {
|
| 9032 | 9036 |
display: none; |
| 9033 | 9037 |
} |
| 9034 |
/* line 217, ../sass/_storage.scss */
|
|
| 9038 |
/* line 218, ../sass/_storage.scss */
|
|
| 9035 | 9039 |
.storage-progress .items-list li .remove:hover em {
|
| 9036 | 9040 |
display: inline; |
| 9037 | 9041 |
} |
| 9038 |
/* line 222, ../sass/_storage.scss */
|
|
| 9042 |
/* line 223, ../sass/_storage.scss */
|
|
| 9039 | 9043 |
.storage-progress .items-list li .progress-col {
|
| 9040 | 9044 |
padding-top: 7px; |
| 9041 | 9045 |
} |
| 9042 |
/* line 225, ../sass/_storage.scss */
|
|
| 9046 |
/* line 226, ../sass/_storage.scss */
|
|
| 9043 | 9047 |
.storage-progress .items-list li:hover {
|
| 9044 | 9048 |
background-color: transparent; |
| 9045 | 9049 |
} |
| 9046 |
/* line 230, ../sass/_storage.scss */
|
|
| 9050 |
/* line 231, ../sass/_storage.scss */
|
|
| 9047 | 9051 |
.storage-progress .progress {
|
| 9048 | 9052 |
height: 20px; |
| 9049 | 9053 |
} |
| 9050 |
/* line 232, ../sass/_storage.scss */
|
|
| 9054 |
/* line 233, ../sass/_storage.scss */
|
|
| 9051 | 9055 |
.storage-progress .progress .meter {
|
| 9052 | 9056 |
background-color: #fff; |
| 9053 | 9057 |
color: #1e1e1e; |
| ... | ... | |
| 9055 | 9059 |
padding-right: 10px; |
| 9056 | 9060 |
line-height: 120%; |
| 9057 | 9061 |
} |
| 9058 |
/* line 240, ../sass/_storage.scss */
|
|
| 9062 |
/* line 241, ../sass/_storage.scss */
|
|
| 9059 | 9063 |
.storage-progress .details {
|
| 9060 | 9064 |
border: 0 none; |
| 9061 | 9065 |
} |
| 9062 | 9066 |
|
| 9063 |
/* line 245, ../sass/_storage.scss */
|
|
| 9067 |
/* line 246, ../sass/_storage.scss */
|
|
| 9064 | 9068 |
.all-height {
|
| 9065 | 9069 |
height: 100%; |
| 9066 | 9070 |
} |
Also available in: Unified diff