diff --git a/YACReaderLibrary/qml.qrc b/YACReaderLibrary/qml.qrc
index 176a4af4..69bcc0fd 100644
--- a/YACReaderLibrary/qml.qrc
+++ b/YACReaderLibrary/qml.qrc
@@ -12,5 +12,17 @@
qml/info-shadow.png
qml/info-top-shadow.png
qml/ComicInfo.qml
+ qml/info-favorites.png
+ qml/info-favorites@2x.png
+ qml/info-rating.png
+ qml/info-rating@2x.png
+ qml/info-tag.png
+ qml/info-tag@2x.png
+ qml/info-tick.png
+ qml/info-tick@2x.png
+ qml/InfoTick.qml
+ qml/InfoFavorites.qml
+ qml/InfoRating.qml
+ qml/YACReaderScrollViewStyle.qml
diff --git a/YACReaderLibrary/qml/ComicInfo.qml b/YACReaderLibrary/qml/ComicInfo.qml
index 09c2165f..30c9d239 100644
--- a/YACReaderLibrary/qml/ComicInfo.qml
+++ b/YACReaderLibrary/qml/ComicInfo.qml
@@ -1,5 +1,291 @@
-import QtQuick 2.0
+import QtQuick 2.6
-Item {
+import QtQuick.Controls 1.4
+import QtQuick.Layouts 1.2
+import QtGraphicalEffects 1.0
+
+Rectangle {
+
+ color : "transparent"
+ id: mainContainer
+
+ height: info.height + 2 * topMargin
+
+ property string infoColor: "#b0b0b0"
+ property font infoFont: Qt.font({
+
+ family: "Arial",
+ pointSize: 10.5
+ });
+
+ property int topMargin : 27
+
+ property bool compact : width <= 650
+
+ RowLayout
+ {
+ id:main_layout
+ anchors.fill: parent
+
+ //READ------------------------------------------------------------
+ ColumnLayout
+ {
+ Layout.topMargin: topMargin
+ Layout.maximumWidth: 61
+ Layout.fillHeight: true
+ id: readStatus
+
+ Layout.alignment: Qt.AlignTop |
+ Qt.AlignHCenter
+
+ Rectangle {
+ color: "transparent"
+ width: 61
+ height: 24
+
+ InfoTick {
+ x: 27
+ y: 5
+ }
+ }
+
+ visible: !mainContainer.compact
+ }
+
+ //INFO------------------------------------------------------------
+ ColumnLayout
+ {
+ id: info
+ //width: parent.width
+ //Layout.fillWidth: true
+
+ Layout.alignment: Qt.AlignTop |
+ Qt.AlignLeft
+
+ Layout.maximumWidth: mainContainer.compact ? mainContainer.width : 960
+
+ Layout.leftMargin: mainContainer.compact ? 30 : 0
+
+ RowLayout
+ {
+ Layout.topMargin: topMargin
+
+ InfoTick {
+ Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+ }
+
+ Item {
+ Layout.fillWidth: true
+ }
+
+ InfoFavorites {
+ Layout.topMargin: 1
+ Layout.rightMargin: 17
+ Layout.alignment: Qt.AlignTop
+ }
+
+ InfoRating {
+ Layout.alignment: Qt.AlignTop
+ Layout.rightMargin: 30
+ }
+
+ visible: mainContainer.compact
+ }
+
+ RowLayout
+ {
+ Text {
+ Layout.topMargin: mainContainer.compact ? 18 : topMargin
+ Layout.fillWidth: true
+ Layout.rightMargin: mainContainer.compact ? 30 : 0
+
+ id: title
+
+ color: "#ffffff"
+ font.family: "Arial"
+ font.bold: true
+ font.pointSize: mainContainer.compact ? 14 : 15.75;
+ wrapMode: Text.WordWrap
+
+ text: "#1" + " - " + "A Single Dream Can Spark A Revolution"
+ }
+
+ RowLayout
+ {
+ visible: !mainContainer.compact
+
+ Layout.alignment: Qt.AlignTop
+ Layout.topMargin: topMargin
+
+ InfoFavorites {
+ Layout.topMargin: 1
+ Layout.rightMargin: 17
+ Layout.alignment: Qt.AlignTop
+ }
+
+ InfoRating {
+ Layout.alignment: Qt.AlignTop
+ Layout.rightMargin: 30
+ }
+ }
+ }
+
+ Flow {
+ spacing: 0
+
+ Layout.fillWidth: true
+ Text {
+ id: volume
+ color: infoColor
+ font: mainContainer.infoFont
+ text: "Clive Barker's Next Testament"
+ rightPadding: 20
+ }
+
+ Text {
+ id: numbering
+ color: infoColor
+ font: mainContainer.infoFont
+ text: "1/12"
+ rightPadding: 20
+ }
+
+ Text {
+ id: genre
+ color: infoColor
+ font: mainContainer.infoFont
+ text: "Terror"
+ rightPadding: 20
+ }
+
+ Text {
+ id: date
+ color: infoColor
+ font: mainContainer.infoFont
+ text: "21/03/2016"
+ rightPadding: 20
+ }
+
+ Text {
+ id: pages
+ color: infoColor
+ font: mainContainer.infoFont
+ text: "23 pages"
+ rightPadding: 20
+ }
+
+ Text {
+ id: showInComicVinw
+ color: "#ffcc00"
+ font: mainContainer.infoFont
+ text: "Show in Comic Vine"
+
+ onLinkActivated: Qt.openUrlExternally(link)
+ }
+ }
+
+ Text {
+ Layout.topMargin: 31
+ Layout.rightMargin: 30
+ Layout.fillWidth: true
+
+ id: sinopsis
+ color: "white"
+ font.family: "Arial"
+ font.pointSize: 11.75
+ wrapMode: Text.WordWrap
+ horizontalAlignment: Text.AlignJustify
+ text: "The first original comic series created and written by Clive Barker is here!Julian Edmond, captain of industry, has left behind everything to begin a walkabout -- he believes he’s on a mission from God. While in the wasteland, he comes across a figure unlike any other, who calls himself Wick...and claims to be God. Their journey will span the globe, as neither man merely wants to make a mark on the world, but a scar.Clive Barker, with internationally acclaimed artist Haemi Jang (HELLRAISER: THE ROAD BELOW), come together to create the next legendary work in the canon of one of the great writers of our era. Ask your retailer about the ultra-limited edition signed Clive Barker variant cover, painted by the master of horror himself!"
+ }
+
+ Text {
+ Layout.topMargin: 20
+ Layout.bottomMargin: 5
+
+ id: authors_title
+ color: "white"
+ font.family: "Arial"
+ font.pointSize: 13.5
+ font.bold: true
+
+ text: "Authors"
+ }
+
+ Flow {
+ Layout.fillWidth: true
+ spacing: 20
+ Repeater {
+ id: authors
+ model: 50
+ Column{
+ Text {
+ color: "white"
+ font.family: "Arial"
+ font.pointSize: 11.25
+
+ text: "Author"
+ }
+
+ Text {
+ color: "#b0b0b0"
+ font.family: "Arial"
+ font.pointSize: 9.75
+ font.italic: true
+ text: "writer"
+ }
+ }
+ }
+ }
+
+ Text {
+ Layout.topMargin: 20
+
+ id: publisher_title
+ color: "white"
+ font.family: "Arial"
+ font.pointSize: 13.5
+ font.bold: true
+
+ text: "Publiser"
+ }
+
+ Text {
+ Layout.topMargin: 20
+ Layout.bottomMargin: 5
+
+ id: characters_title
+ color: "white"
+ font.family: "Arial"
+ font.pointSize: 13.5
+ font.bold: true
+
+ text: "Characters"
+ }
+
+ Flow {
+ Layout.fillWidth: true
+ spacing: 20
+ Repeater {
+ id: characters
+ model: 50
+
+ Text {
+ color: "white"
+ font.family: "Arial"
+ font.pointSize: 11.25
+
+ text: "character"
+ }
+ }
+ }
+ }
+
+ Item {
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+ Layout.minimumWidth: 0
+ Layout.preferredWidth: 0
+ }
+ }
}
diff --git a/YACReaderLibrary/qml/InfoFavorites.qml b/YACReaderLibrary/qml/InfoFavorites.qml
new file mode 100644
index 00000000..8ce2db26
--- /dev/null
+++ b/YACReaderLibrary/qml/InfoFavorites.qml
@@ -0,0 +1,15 @@
+import QtQuick 2.6
+
+import QtGraphicalEffects 1.0
+
+Image {
+ id: favorites_button_compact
+ source: "info-favorites.png"
+
+ ColorOverlay {
+ anchors.fill: favorites_button_compact
+ source: favorites_button_compact
+ color: "#e84852"
+ }
+}
+
diff --git a/YACReaderLibrary/qml/InfoRating.qml b/YACReaderLibrary/qml/InfoRating.qml
new file mode 100644
index 00000000..651bdbc6
--- /dev/null
+++ b/YACReaderLibrary/qml/InfoRating.qml
@@ -0,0 +1,21 @@
+import QtQuick 2.6
+
+import QtGraphicalEffects 1.0
+
+Row {
+ spacing: 6
+
+ Repeater {
+ id: rating_compact
+ model: 5
+ Image {
+ source: "info-rating.png"
+
+ ColorOverlay {
+ anchors.fill: rating_compact.itemAt(index)
+ source: rating_compact.itemAt(index)
+ color: index <= 3 ? "#ffffff" : "#1c1c1c"
+ }
+ }
+ }
+}
diff --git a/YACReaderLibrary/qml/InfoTick.qml b/YACReaderLibrary/qml/InfoTick.qml
new file mode 100644
index 00000000..8e7bdff0
--- /dev/null
+++ b/YACReaderLibrary/qml/InfoTick.qml
@@ -0,0 +1,15 @@
+import QtQuick 2.6
+
+import QtGraphicalEffects 1.0
+
+Image {
+ id: read_compact
+
+ source: "info-tick.png"
+
+ ColorOverlay {
+ anchors.fill: read_compact
+ source: read_compact
+ color: true ? "#e84852" : "#1c1c1c"
+ }
+}
diff --git a/YACReaderLibrary/qml/info-favorites.png b/YACReaderLibrary/qml/info-favorites.png
new file mode 100644
index 00000000..f8b61395
Binary files /dev/null and b/YACReaderLibrary/qml/info-favorites.png differ
diff --git a/YACReaderLibrary/qml/info-favorites@2x.png b/YACReaderLibrary/qml/info-favorites@2x.png
new file mode 100644
index 00000000..19aedd32
Binary files /dev/null and b/YACReaderLibrary/qml/info-favorites@2x.png differ
diff --git a/YACReaderLibrary/qml/info-rating.png b/YACReaderLibrary/qml/info-rating.png
new file mode 100644
index 00000000..d65cf2ab
Binary files /dev/null and b/YACReaderLibrary/qml/info-rating.png differ
diff --git a/YACReaderLibrary/qml/info-rating@2x.png b/YACReaderLibrary/qml/info-rating@2x.png
new file mode 100644
index 00000000..01048c80
Binary files /dev/null and b/YACReaderLibrary/qml/info-rating@2x.png differ
diff --git a/YACReaderLibrary/qml/info-tag.png b/YACReaderLibrary/qml/info-tag.png
new file mode 100644
index 00000000..b7209c58
Binary files /dev/null and b/YACReaderLibrary/qml/info-tag.png differ
diff --git a/YACReaderLibrary/qml/info-tag@2x.png b/YACReaderLibrary/qml/info-tag@2x.png
new file mode 100644
index 00000000..04a995f8
Binary files /dev/null and b/YACReaderLibrary/qml/info-tag@2x.png differ
diff --git a/YACReaderLibrary/qml/info-tick.png b/YACReaderLibrary/qml/info-tick.png
new file mode 100644
index 00000000..aa6b80b9
Binary files /dev/null and b/YACReaderLibrary/qml/info-tick.png differ
diff --git a/YACReaderLibrary/qml/info-tick@2x.png b/YACReaderLibrary/qml/info-tick@2x.png
new file mode 100644
index 00000000..46455b1d
Binary files /dev/null and b/YACReaderLibrary/qml/info-tick@2x.png differ