Project

General

Profile

« Previous | Next » 

Revision 652e4476

Added by koszko over 1 year ago

improve styling of item preview

View differences:

html/item_list.html
73 73 
      opacity: 0.75;
74 74 
      cursor: not-allowed;
75 75 
  }
76 
  .item_preview_container .item_preview_main_div {
77 
      margin: auto;
78 
  }
76 79 
  .list_buttons {
77 80 
      margin: 1em auto;
78 81 
      text-align: center;
html/item_preview.html
39 39 
#LOADCSS html/grid.css
40 40 
<style>
41 41 
  .item_preview_main_div {
42 
      margin: 1.3em 0.8em 1em 0.8em;
42 
      padding: 1.3em 0.8em 1em 0.8em;
43 
      display: grid;
44 
      grid-template-columns: auto;
45 
      max-width: 800px;
46 
  }
47 

  		




  
  48
  
    
  .item_preview_main_div > * {


  		




  
  49
  
    
      margin-top: 1.5em;


  		




  
  50
  
    
      margin-left: 1.8em;


  		




  
  51
  
    
      margin-right: 1em;


  		




  
  52
  
    
  }


  		




  
  53
  
    
  .item_preview_main_div > label {


  		




  
  54
  
    
      margin-left: 1em;


  		




  
  55
  
    
  }


  		




  
  56
  
    

  		




  
  57
  
    
  .item_preview_main_div h3 {


  		




  
  58
  
    
      text-align: center;


  		




  
  59
  
    

  		




  
  60
  
    
      margin-left: 1.8em;


  		




  
  61
  
    
  }


  		




  
  62
  
    

  		




  
  63
  
    
  .item_preview_main_div a, .item_preview_payload {


  		




  
  64
  
    
      word-break: break-word;


  		




  
  65
  
    
  }


  		




  
  66
  
    

  		




  
  67
  
    
  .item_preview_payload_id {


  		




  
  68
  
    
      margin: 0.1em 0 0.2em 1em;


  		




  43
  69
  
    
  }


  		




  44
  70
  
    
</style>


  		




  45
  71
  
    
<template>


  		




  46
  72
  
    
  <div id="resource_preview" data-template="main_div"


  		




  47
  
  
    
       class="grid_2 grid_form item_preview_main_div">


  		




  48
  
  
    
    <h3 class="grid_col_both">resource preview</h3>


  		




  49
  
  
    
    <label class="grid_col_1">conforms to:</label>


  		




  50
  
  
    
    <span data-template="conforms_to" class="grid_col_2">...</span>


  		




  51
  
  
    
    <label class="grid_col_1">identifier:</label>


  		




  52
  
  
    
    <span data-template="identifier" class="grid_col_2">...</span>


  		




  53
  
  
    
    <label class="grid_col_1">long name:</label>


  		




  54
  
  
    
    <span data-template="long_name" class="grid_col_2">...</span>


  		




  55
  
  
    
    <label class="grid_col_1">UUID:</label>


  		




  56
  
  
    
    <span data-template="uuid" class="grid_col_2">...</span>


  		




  57
  
  
    
    <label class="grid_col_1">version:</label>


  		




  58
  
  
    
    <span data-template="version" class="grid_col_2">...</span>


  		




  59
  
  
    
    <label class="grid_col_1">description:</label>


  		




  60
  
  
    
    <span data-template="description" class="grid_col_2">...</span>


  		




  61
  
  
    
    <label class="grid_col_1">dependencies:</label>


  		




  62
  
  
    
    <span class="grid_col_2"><ul data-template="dependencies"></ul></span>


  		




  63
  
  
    
    <label class="grid_col_1">scripts:</label>


  		




  64
  
  
    
    <span class="grid_col_2"><ul data-template="scripts"></ul></span>


  		




  65
  
  
    
    <label class="grid_col_1">source name:</label>


  		




  66
  
  
    
    <span data-template="source_name" class="grid_col_2">...</span>


  		




  67
  
  
    
    <label class="grid_col_1">copyright:</label>


  		




  68
  
  
    
    <span class="grid_col_2"><ul data-template="copyright"></ul></span>


  		




  
  73
  
    
       class="item_preview_main_div">


  		




  
  74
  
    
    <h3>resource preview</h3>


  		




  
  75
  
    
    <label>conforms to:</label>


  		




  
  76
  
    
    <span data-template="conforms_to">...</span>


  		




  
  77
  
    
    <label>identifier:</label>


  		




  
  78
  
    
    <span data-template="identifier">...</span>


  		




  
  79
  
    
    <label>long name:</label>


  		




  
  80
  
    
    <span data-template="long_name">...</span>


  		




  
  81
  
    
    <label>UUID:</label>


  		




  
  82
  
    
    <span data-template="uuid">...</span>


  		




  
  83
  
    
    <label>version:</label>


  		




  
  84
  
    
    <span data-template="version">...</span>


  		




  
  85
  
    
    <label>description:</label>


  		




  
  86
  
    
    <span data-template="description">...</span>


  		




  
  87
  
    
    <label>dependencies:</label>


  		




  
  88
  
    
    <span><ul data-template="dependencies"></ul></span>


  		




  
  89
  
    
    <label>scripts:</label>


  		




  
  90
  
    
    <span><ul data-template="scripts"></ul></span>


  		




  
  91
  
    
    <label>source name:</label>


  		




  
  92
  
    
    <span data-template="source_name">...</span>


  		




  
  93
  
    
    <label>copyright:</label>


  		




  
  94
  
    
    <span><ul data-template="copyright"></ul></span>


  		




  69
  95
  
    
  </div>


  		




  70
  96
  
    
  <div id="mapping_preview" data-template="main_div"


  		




  71
  
  
    
       class="grid_2 grid_form">


  		




  72
  
  
    
    <h3 class="grid_col_both">mapping preview</h3>


  		




  73
  
  
    
    <label class="grid_col_1">conforms to:</label>


  		




  74
  
  
    
    <span data-template="conforms_to" class="grid_col_2">...</span>


  		




  75
  
  
    
    <label class="grid_col_1">identifier:</label>


  		




  76
  
  
    
    <span data-template="identifier" class="grid_col_2">...</span>


  		




  77
  
  
    
    <label class="grid_col_1">long name:</label>


  		




  78
  
  
    
    <span data-template="long_name" class="grid_col_2">...</span>


  		




  79
  
  
    
    <label class="grid_col_1">UUID:</label>


  		




  80
  
  
    
    <span data-template="uuid" class="grid_col_2">...</span>


  		




  81
  
  
    
    <label class="grid_col_1">version:</label>


  		




  82
  
  
    
    <span data-template="version" class="grid_col_2">...</span>


  		




  83
  
  
    
    <label class="grid_col_1">description:</label>


  		




  84
  
  
    
    <span data-template="description" class="grid_col_2">...</span>


  		




  85
  
  
    
    <label class="grid_col_1">payloads:</label>


  		




  86
  
  
    
    <div data-template="payloads" class="grid_col_both grid_2"></div>


  		




  87
  
  
    
    <label class="grid_col_1">source name:</label>


  		




  88
  
  
    
    <span data-template="source_name" class="grid_col_2">...</span>


  		




  89
  
  
    
    <label class="grid_col_1">copyright:</label>


  		




  90
  
  
    
    <span class="grid_col_2"><ul data-template="copyright"></ul></span>


  		




  
  97
  
    
       class="item_preview_main_div">


  		




  
  98
  
    
    <h3>mapping preview</h3>


  		




  
  99
  
    
    <label>conforms to:</label>


  		




  
  100
  
    
    <span data-template="conforms_to">...</span>


  		




  
  101
  
    
    <label>identifier:</label>


  		




  
  102
  
    
    <span data-template="identifier">...</span>


  		




  
  103
  
    
    <label>long name:</label>


  		




  
  104
  
    
    <span data-template="long_name">...</span>


  		




  
  105
  
    
    <label>UUID:</label>


  		




  
  106
  
    
    <span data-template="uuid">...</span>


  		




  
  107
  
    
    <label>version:</label>


  		




  
  108
  
    
    <span data-template="version">...</span>


  		




  
  109
  
    
    <label>description:</label>


  		




  
  110
  
    
    <span data-template="description">...</span>


  		




  
  111
  
    
    <label>payloads:</label>


  		




  
  112
  
    
    <div data-template="payloads" class="item_preview_payload"></div>


  		




  
  113
  
    
    <label>source name:</label>


  		




  
  114
  
    
    <span data-template="source_name">...</span>


  		




  
  115
  
    
    <label>copyright:</label>


  		




  
  116
  
    
    <span><ul data-template="copyright"></ul></span>


  		




  
  117
  
    
  </div>


  		




  
  118
  
    
  <div id="pattern_payload_entry" data-template="main_div">


  		




  
  119
  
    
    <span data-template="pattern"></span>


  		




  
  120
  
    
    &#8594;


  		




  
  121
  
    
    <div data-template="payload" class="item_preview_payload_id"></div>


  		




  91
  122
  
    
  </div>


  		




  92
  123
  
    
</template>


  		




  93
  124
  
    
#ENDIF


  		












  

    
      html/item_preview.js
    
  





  129
  129
  
    
	/* We use a non-breaking space because normal space would be ignored. */


  		




  130
  130
  
    
	const [nbsp, rarrow] = [160, 0x2192].map(n => String.fromCodePoint(n));


  		




  131
  131
  
    
	const texts = [`${pattern}${nbsp}`, `${rarrow}  ${payload.identifier}`];


  		




  132
  
  
    
	for (let i = 0; i < texts.length; i++) {


  		




  133
  
  
    
	    const span = document.createElement("span");


  		




  134
  
  
    
	    span.innerText = texts[i];


  		




  135
  
  
    
	    span.classList.add(`grid_col_${i + 1}`);


  		




  136
  
  
    
	    preview_object.payloads.append(span);


  		




  137
  
  
    
	}


  		




  
  132
  
    
	const payload_entry = clone_template("pattern_payload_entry");


  		




  
  133
  
    
	payload_entry.pattern.innerText = pattern;


  		




  
  134
  
    
	payload_entry.payload.innerText = payload.identifier;


  		




  
  135
  
    
	preview_object.payloads.append(payload_entry.main_div);


  		




  138
  136
  
    
    }


  		




  139
  137
  
    

  		




  140
  138
  
    
    const link_maker = file_ref => link_cb(preview_object, file_ref);


  		












Also available in:  Unified diff