Improved the index gui section in the basic theme and added smiley support

MoinMoin/themes/basic/static/custom-less/basic.less

 @import "notice.less";
 @import "bootstrap.less";
 @import "moin-variables.less";
 
 // ---- Customising the top navbar breakpoint
 @grid-float-breakpoint: @screen-md;
 
 @media screen and (min-width: @grid-float-breakpoint) {
   .moin-pull-right {
     .pull-right;
@@ skipping 290 matching lines @@
 ul.moin-breadcrumb li ul.moin-bcs-subitems{
   display: none;
   position: absolute;
 }
 ul.moin-breadcrumb li:hover ul.moin-bcs-subitems{
   display: block;
 }
 .moin-thead{
     background-color: silver;
 }
+
+#filter-btn {·
+  background-color: #428bca;

[Thomas.J.Waldmann, 2014/06/14 18:24:16]

hardcoded colour

how is that compatible with bootstrap themes?

shouldn't colours be taken from some theme palette (or at least be based on
them)?

[ajgupta93, 2014/06/26 11:50:27]

This color is picked from a bootstrap element already present in the theme.

+  border-radius: 3px;
+  display: inline;
+  padding: 10px;
+  color: #ffffff;
+  margin-bottom: 10px;
+}
+
+.spacer {·
+  display: block;
+}
+
+.moin-contenttypes-wrapper {·
+  ul {
+    -webkit-padding-start: 0px;
+    -moz-padding-start: 0px;
+   }
+
+  div {
+    cursor: pointer;
+    display: block;
+  }
+
+  form {
+    display: none;
+
+    li label {
+      cursor:  pointer;
+      display: inline;
+      line-height: 1.5em;
+      vertical-align: middle;
+      color: #1e90ff;
+      text-transform: capitalize;

[Thomas.J.Waldmann, 2014/06/14 18:24:16]

why?

+    }
+
+    li span {
+      font-size: .8em;
+      text-transform: capitalize;

[Thomas.J.Waldmann, 2014/06/14 18:24:16]

why?

+      display: block;
+    }
+
+    .filters {
+      background-color: white;
+      border: none;
+      margin-top: 1em;
+
+      .filter-toggle, .filter-more {·
+        font-size: 1em;
+        background-color: #eeeeee;
+        border: 1px solid #dddddd;
+        padding: 0.5em;
+        border-radius: 0.5em;
+        margin: 0.2em;
+        text-decoration: none;
+      }
+
+    }
+
+  }
+
+  li {
+    list-style-type: none;
+    width: 40%;
+    border-radius: 5px;
+    display: block;
+    padding: 5px;
+    margin-top: 5px;
+  }
+}
+
+.moin-item-index div {
+
+  .moin-select-item {
+    visibility: hidden;
+    display: inline-block;
+    width: 17px;
+    cursor: default;
+    background: transparent url("../img/moin-checkbox-off.png") no-repeat;

[Thomas.J.Waldmann, 2014/06/14 18:24:16]

ehrm, doesn't bootstrap have something pretty for checkboxes that doesn't need
an image from us?

+    margin-top: 1em;
+  }
+
+  &.selected-item .moin-select-item,&:hover .moin-select-item {·
+    visibility: visible;
+  }
+
+  &.selected-item .moin-select-item {
+    background-image: url("../img/moin-checkbox-on.png");

[Thomas.J.Waldmann, 2014/06/14 18:24:16]

same here

+  }
+}
+
+.moin-download-link {
+  display: none;
+}
+
+.ct-hide:after {
+  content: url("../img/moin-moveup.png");
+  margin: 0 .2em;
+  float: right;
+  vertical-align: middle;
+}
+
+.moin-index-message {
+  width: 50%;
+  margin: 1em auto;
+  text-align: center;
+  display: none;
+
+  span {
+    padding: 4px;
+    background-color: #007cef;
+    color: #ffffff;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+}
+
+.moin-index-path {
+  margin-left: .5em;
+
+  &:before {
+    content: url("../img/moin-parent.png");

[Thomas.J.Waldmann, 2014/06/14 18:24:16]

same here

+    margin: 0.3em
+  }
+}
+
+.moin-clr {
+  clear: both;
+}
+
+.moin-item-index {
+  width: 100%;
+  margin-left: 0.5em;
+
+  div {
+    float: left;
+    width: 16.5em;
+
+    .moin-select-item {
+      visibility: hidden;
+      display: inline-block;
+      width: 17px;
+      cursor: default;
+      background: transparent url("../img/moin-checkbox-off.png") no-repeat;
+      margin-top: 1em;
+    }
+
+    &.selected-item .moin-select-item,&:hover .moin-select-item {
+      visibility: visible;
+    }
+
+    &.selected-item .moin-select-item {
+      background-image: url("../img/moin-checkbox-on.png");
+    }
+  }
+}
+
+.moin-index-separator {
+  clear: both;
+  border-top: 1px dashed #ccc;
+  display: none;
+}
+
+.popup-container {
+  margin: 0;
+  border: 5px solid #428bca;
+  border-radius: 6px 6px 0 0;
+}
+
+.popup-header {
+  background-color: #428bca;
+  color: #ffffff;
+  padding: 10px;
+  margin: 0;
+}
+
+input {
+
+  &[value="X"] {
+    padding: 0.1px;
+    margin: -.2em;
+    width: 19px;
+    border-radius: 2em;
+    float: right;
+
+    &:hover {
+      background: #f4f4f4;
+    }
+  }
+
+  &[type="text"] {
+    width: 96%;
+  }
+
+  &[type="submit"],&[type="button"],button {
+    font-weight: bold;
+    font-size: .75em;
+    background: #d6d5d0;
+    padding: 4px 15px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    box-shadow: 1px 1px 2px #9d9d9b;
+    cursor: pointer;
+  }
+
+  &:hover {
+    box-shadow: 1px 1px 2px #000;
+  }
+
+  &:active {
+    position: relative;
+    top: 1px;
+  }
+}
+
+input,select {
+  padding: 3px;
+  background: #f4f4f4;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+}
+
+.popup-body {
+  clear: both;
+  background-color: #f4f4f4;
+  color: #000000;
+  padding: 10px;
+  margin: 0;
+
+  label {
+    margin: 5px;
+  }
+
+  input {
+    margin: 8px 5px;
+  }
+}
+
+#moin-initials {
+  width: 90%;
+  margin: 5px auto;
+  text-align: center;
+
+  a {
+    display: inline-block;
+    margin: 0;
+    padding: 4px 5px;
+
+    &:hover,&.selected {
+      background: #428bca;
+      border-radius: 5px;
+      color: #ffffff;
+      text-decoration: none
+    }
+
+  }
+}
+
+#popup {
+  background: transparent url("../img/moin-transparent-bg.png") repeat;
+  padding: 5px;
+  width: 40%;
+  position: absolute;
+  top: 10%;
+  left: 30%;
+  display: none;
+  z-index: 10;
+}
+
+.moin-error {
+  color: #ff2727;
+  background: #d6d5d0;
+  padding: 4px;
+  margin: 1em;
+  text-align: center;
+  list-style-type: none;
+  border-radius: 5px;
+}
+
+.moin-textcha {
+  padding-top: .2em;
+}
+
+#moin-upload-cont {
+  min-height: 10px;
+}
+
+#file_upload {
+  margin-top: 2em;
+}
+
+form.upload_file {
+  background-color: #d6d5d0;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  direction: ltr;
+  font-weight: bold;
+  height: 2.5em;
+  line-height: 2.5em;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  width: 15em;
+  display: block;
+  box-shadow: 0 0 5px #9d9d9b;
+
+  &:hover {
+    box-shadow: 0 0 5px #000;
+  }
+
+  input {
+    cursor: pointer;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+  }
+
+  button {
+    display: none
+  }
+}
+
+.file_upload_template .file_upload_start {
+  visibility: hidden;
+  border-width: 0;
+  padding: 0;
+
+  button {
+    width: 0;
+  }
+}
+
+.file_name {
+  word-break: break-all;
+  word-wrap: break-word;
+  max-width: 10em;
+}
+
+.upload-form {
+  display: none;
+}
+
+.moin-drag {
+  font-size: .7em;
+  color: #9d9d9b;
+}
+
+#lightbox {
+  background: #f4f4f4;
+  opacity: .7;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9;
+  margin: 0;
+  display: none
+}
+

[Thomas.J.Waldmann, 2014/06/14 18:24:16]

somehow I have a vague feeling that we add way to much own css and icons/images
instead of reusing good default styles that might be present in bootstrap.

 // set min-width to prevent search box from floating off window to right
 @media (min-width: 768px) {
   .container {
     width: auto;
   }
 }
 @media (min-width: 992px) {
   .container {
     width: auto;
   }
 }
 @media (min-width: 1200px) {
   .container {
     width: auto;
   }
 }